Other divs misbehave in case of fixing position of one


#1


https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/7?curriculum_id=50579fb998b470000202dc8b


The moment I added "position:fixed" for my header in css, the other div's (say .left .right and .main) moved under the header. They must be initially floated just below the header and not under it. Please help!
Another query is: I want to make my .main div (red color) to spread on both side till .left and .right. What CSS should I add to them?


HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	
	<div id="header">Rishabh Prajapati
	</div>
	<div class="left">
	</div>
	<div class="main"><h4>Personal Details:</h4>
	</div>
	<div class="right">
	</div>
	<div id="footer">
	</div>
	
	</body>
</html>

CSS Code:

div{
    border:double white;
    border-radius:5px;
    font-family:Calibri;
    padding: 5px;
    background-color: red;
}

.main {    
    height:1000px;
    display:inline-block;
    float:left;
}

#header {
    width:100%;
    color:purple;
    font-family: 'cambria';
    font-size: 72px;
    display:block;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color:skyblue;
    padding:5px;
    border:double #ffffff;
    z-index:1;
}

.left {
    display:block;
    height:1000px;
    width: 15%;
    background-color: #888888;
    font-family: 'High Tower Text';
    font-size:12px;
    float:left;
    border-top-left-radius:5px;
    border-bottom-right-radius:5px;
    border:double #ffffff;
}

.right{
    display:block;
    height:1000px;
    width: 10%;
    background-color: lightgreen;
    font-family: 'High Tower Text';
    font-size:12px;
    float:right;
    border-bottom-left-radius:5px;
    border-top-right-radius:5px;
    border:double #ffffff;
}

#footer {
    border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
    clear:both;
    display:block;
    background-color:gold;
    font-family: Cooper;
    font-size:12px;
    border: double white;
    height: 60px;
}


#2

you could simply push them down:

.left, .middle, .right { margin-top: 50px; }

but then i would give your header a height, otherwise this might cause problems.

Good luck with that, i would simply make another div and position it correctly


#3

Can't I use one of the displays - "inline, inline-block, block" for the
middle (.main) . I understood the three of them during the lesson. But when
I tried to apply them for these, I didn't worked and I got confused. Please
help me clearing about them.

Great thanks to Codecademy!


#4

you could use inline-block, which will display blocks inline.

But i personally prefer float: left for .left, .middle and .right, that is easier


#5

Okay. I did as you said. Removed all float and added as ".left, .main, .right {float:left;}"
But then I would have to decide the width ratio for them.
Currently I had .left as 15% and .right as 10% So I have to set .main to 75%. Right? But If I do so, the green one (.right) moves down (or say wrapped).


#6

you have to remove body's margin:

body { margin: 0 }

and i would add:

div { box-sizing: border--box; }

it will make padding and border part of the width of an element


#7

That's really new for me. I didn't knew about that. But that's one really important one. Thanks anyway. :wink:


#8

if you need more help, post an updated version of your code


#9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.