Divs all over the place


#1


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

I can't manage to align the right and left divs

index.html

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	    <div id="header">test</div>
	    <div class="left">test</div>
	    <div class="right">test</div>
	    <div id="footer">test</div>
	</body>
</html>

stylesheet.css

#header {
    background-color: olive;
    width: 1000px;
    height: 100px;
    position: fixed;
    z-index: 1;
}

#footer {
    background-color: olive;
    width: 1000px;
    height: 100px;
    clear: both;
}

.left {
    background-color: turquoise;
    width: 300px;
    height:500px;
    float: left;
    margin-bottom: 5px;
}

.right {
    background-color: lime;
    width: 700px;
    height: 500px;
    float: right;
}


#2

Try like this


#3

@micromaster62941
Use the following and see what happens

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
<style>
#header {
    background-color: olive;
    /*top: -100px;*/
    width: 1000px;
    height: 100px;
    position: fixed;
    z-index: -1;
}

#footer {
    background-color: olive;
    width: 1000px;
    height: 100px;
    clear: both;
}

.left {
    background-color: turquoise;
 /*   top: 100px;*/
    width: 300px;
    height:500px;
    float: left;
    margin-bottom: 5px;
}

.right {
    background-color: lime;
    /*top: 100px;*/
    width: 700px;
    height: 500px;
    float: right;
}
</style>
		</head>
	<body>
	    <div id="header">test</div>
	    <div class="left">test</div>
	    <div class="right">test</div>
	    <div id="footer">test</div>
	</body>
</html>

Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
https://developer.mozilla.org/en-US/docs/Web/CSS/position


#4

Thank you, it worked. :slight_smile:

However for the right and left I cannot see the word 'test', is like it is at the top of the 2 divs hidden behind the header?


#5

:frowning:


#6

No open the output in a new window by clicking the black arrow you will see the test I can see it


#7

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