Divs don't float correctly (I think)


#1

Hi everybody,

I can't seem to get the divs next to each other even though they have been 'told' to float left and right:

What am I doing wrong?

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

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
        <div id="header">
            <h1>Resume</h1>
        </div>
        <div class="left">
            <p>here we go</p>
            <ol>
                <li>word</li>
                <li>excel</li>
                <li>social</li>
                <li>blogs</li>
        </div>	
        <div class="right">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>	
        <div id="footer">
            <a href="mailto:nielsauwers@live.nl">send me an email</a>
        </div>	
	</body>
</html>


div {
 border-radius: 5px;
}
#header {
    position: fixed;
    z-index: 1;
    background-color: #fb2e01;
    height: 60px;
    width: 95%;
}
.right {
    float: right;
    background-color: #6fcb9f;
    height: 400px;
    width: 75%;
    margin-top: 10px;
}
.left {
    float: left;
    background-color: #ffe28a;
    height: 400px;
    width: 7%;
}
#footer {
    background-color: blue;
    height: 60px;
    width: 100%;
    clear: both;
}

#2

Just saying, would be nice if the user agent were given a title...

<title>Resume</title>

#3

It would be nice if you use position relative for class .right and .left and .footer too

then adjust you margin


#4

float will cause the element to go as far left (or right) as possible, so if you then want them next to each other, you will need to cover the entire width (for example 25% for left, and 75% for right), but this only works if you removes body's default margin (otherwise, there is not enough room)

also, i would push left and right down, so they are below your header like i did here


#5

Thank you very much @stetim94!

Thing I'm running into now is the apparent lack of space for any padding. How does this relate to the percentages that you define for width?

Cheers!


#6

padding expands the elements, which means there isn't enough space, add this:

div { box-sizing: border-box }

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


#7

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