Hi everyone, I need help figuring something out. I got 2 divs, one is floated left and the other is floated right and when I resize the page to a lower width the floated right div stays on the right hand side. Is there anyway that I can fix it so it’ll just stay to the left of the page? or could I just float both divs left? Thanks.
With the aid of a media query, it’s certainly possible with or without using floats. You haven’t given us much information on which to base an example, though. Do you have a link to the code that you’re working on or can you include a working page in a post?
Just to keep it simple as possible
<div id="about">
<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="contact">
<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>
#about {
float: left;
width: 500px;
}
#contact {
float: right;
width: 500px;
}
when you re-size the page the contact div will stay to the right when I want it to stay to the left. I know I could just float both divs left but I’m curious to know if there was any other way.
With the aid of a media query boxes, such as floats, inline-block, or table-cells, can be changed to block effectively placing them over-and-under instead of side-by-side.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- IF NEEDED -->
<title>floats to blocks</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1207090-Floating-Divs
2014.04.30 20:55
jlisec01
-->
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.about,.contact {
width:50%;
border:1px solid blue;
}
.about {float:left;}
.contact {float:right;}
p {padding:0 1em;}
@media screen and (max-width:1000px) {
.about,.contact {
display:block;
width:auto;
}
}
</style>
</head>
<body>
<div class="about">
<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 class="contact">
<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>
</body>
</html>
Yes, you could also just float both divs left.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1207090-Floating-Divs
2014.04.30 20:55
jlisec01
-->
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.about,.contact {
width:500px;
border:1px solid blue;
float:left;
}
p {padding:0 1em;}
</style>
</head>
<body>
<div class="about">
<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 class="contact">
<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>
</body>
</html>
^ thanks for the help. quick question about the code, I’ve seen box-sizing:border-box before but what does it actually do?
I’ve seen box-sizing:border-box before but what does it actually do?
This property ‘controls the box-model’ used. By default a bock element WITH EXPLICIT dimensions will add padding and border to the calculated dimensions, this is known as ‘content-box’. That is to say that if your DIV has padding:10px ; width:600px; border:5px solid red; it is actually 630px wide= 600px+ 10px (right padding) +10px (left padding) 5px (right border) + 5px (left border)
box-sizing: border-box; the dimensions padding AND border are included (so the total calculated width for the above element is 600px)
box-sizing: padding-box; includes ONLY the padding (so the total calculated width for the above element is 610px)
hope that clears things up
You can demonstrate the effects described by @dresden_phoenix by changing the borders from 1px to something bigger, like 50px, and disabling/enabling the border-box property to see what happens. 