I am trying to code this page.
I don't know how to solve the problem, but it seems that overflow:hidden of #bigf makes image go down and clipped. How to make all those divs inside #bigf fits nicely in one horizontal line? Thank you.
HTML:
<html>
<head>
<title>Title</title>
<meta name="Description" content="desc">
<meta name="keywords" content="keywords">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<div id="top">
<div class="container">
<h1>Name</h1>
</div>
</div>
<div id="bigf">
<div class="container">
<img src="hydraulik.png" class="hydra">
<div class="sm1">
<div class="textsec">SOMETHING</div>
<div class="textsec">IS SAID HERE</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin:0px;
padding:0px;
}
body {
font-family: 'Exo 2', sans-serif;
}
#wrap {
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
}
#top {
height:60px;
}
.container {
width:1160px;
margin:0 auto;
}
#bigf {
height:380px;
background: url(bf.jpg) right no-repeat black;
overflow:hidden;
}
.textsec {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
display: inline-block;
color: #FFF;
font-weight: 600;
padding: 10px 25px;
outline: 2px solid rgba(51, 51, 51, 0.2);
text-shadow: 2px 3px 0px #000;
margin: 0px 0px 10px;
float:right;
font-size:26px;
}
.hydra {
margin-left:25px;
float:left;
}
.sm1 {
margin-top:150px;
}
Add a clearfix to the #bigf .container.
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
And add the class to the container.
<div class="container cf"></div>
You have floated elements inside there so I recommend you to read the following : What is Clearfix
Try to add following code in your css:
.hydra {
float: left;
margin-left: 25px;
vertical-align: top;
}
No need to remove overflow:hidden just use vertical-align: top;. so that the persons image and text will be aligned to top as expected.
Hope this helps you!
Hey it has nothing to do with overflow hidden.
The Image of the man jumps down because of div.sm1 the divs in there are floating and messing with the box model.
Depending of what you want to achieve you can give .sm1 a fixed max-width (container size - image size) and let it float right, too. This should do the trick.
Replace your container styles with the below code.
.container {
width: 1160px;
margin: 0 auto;
display: flex;
}
Related
G'day.
I am working on a responsive website. This is what I am trying to make the header section look like on desktop and mobile respectively:
The contents of id="header" are supposed to take up as much space as they need to but no more than a 100% of the page's width. I am having trouble coming up with a structure that could be turned responsive and creating the grid in general. Is there a similar grid somewhere I could take a look at? or should I simply go with a table instead of trying to come up with a "CSS-only" solution?
I would be very grateful for a solution that'd work with my current structure. Please let me know if there is anything I need to mention to make this question understandable (if it isn't) and thank you in advance for any help you provide.
I have looked through a number of tutorials and stackoverflow questions where similar layouts have been pursued and I have tried a number of approaches using position and CSS tables, but so far I have not been successful.
Here's my HTML:
<!DOCTYPE html>
<html>
<head lang="en-au">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container" class="dtable">
<div id="header" class="dtrow">
<div class="dtable">
<div class="dtrow">
<div class="dtcell" id="logo"></div>
<div class="dtcell">
<div class="dtable">
<div class="dtcptn">
<span class="cblock" id="menu">
Link #0
Link #1
Link #2
Link #3
Link #4
Link #5
Link #6
Link #7
</span>
</div>
<div class="dtrow">
<div class="dtcell">
<span class="cblock">Phone</span>
</div>
<div class="dtcell">
<span class="cblock">Social</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content" class="dtrow">
</div>
<div id="footer" class="dtrow">
<span class="cblock">© The three musketeers, 2017. Say hello to the UFO.</span>
</div>
</div>
</body>
</html>
Here's my CSS:
#charset "utf-8";
* { box-sizing: border-box; }
a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
textarea { resize: none; }
input[type="button"], input[type="submit"] { cursor: pointer; }
.dtable { display: table; }
.dtcell { display: table-cell; }
.dtcptn { display: table-caption; }
.dtrow { display: table-row; }
span.cblock { display: inline-block; padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#container { width: 100%; height: 100%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header > div { margin: 0 auto; }
#logo { width: 100px; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
Here is a simple sample showing how you could do, switching between display: table-cell and display: block;
Note the comment <!-- --> in the markup, that get rid of the inline block element white space (here is more ways to do that: how-to-remove-the-space-between-inline-block-elements)
Fiddle demo
Stack snippet
.dtable { display: table; width: 100%; }
.dtcell { display: table-cell; padding: 10px; }
.dtcptn { display: table-caption; }
.dtrow { display: table-row; }
.dtcell:first-child {
width: 1px;
}
.dtcell:first-child span {
display: inline-block;
border: 1px solid;
box-sizing: border-box;
}
.dtcell:first-child span:last-child {
display: none;
}
.dtcell:last-child div {
border: 1px solid;
box-sizing: border-box;
}
.dtcell:last-child span {
display: inline-block;
width: 50%;
border: 1px solid;
box-sizing: border-box;
}
#media screen and (max-width: 600px) {
.dtcell:first-child {
width: 100%;
}
.dtcell:first-child span:last-child {
display: inline-block;
}
.dtcell,
.dtcell:last-child span {
display: block;
width: auto;
}
.dtcell:last-child div {
display: none;
}
}
<div id="container" class="dtable">
<div id="header" class="dtrow">
<div class="dtcell" id="logo">
<span>logo</span>
<span>hamburgermenu</span>
</div>
<div class="dtcell">
<div>links</div>
<span>phone</span><!--
--><span>social</span>
</div>
</div>
</div>
Well, here is my answer using positioning and pseudo-elements.
#charset "utf-8";
* { box-sizing: border-box; }
a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
textarea { resize: none; }
input[type="button"], input[type="submit"] { cursor: pointer; }
.dtable { display: table; }
.dtrow { display: table-row; }
span.cblock { display: inline-block; padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#container { width: 100%; height: 100%; }
#contact, #social { width: 50%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header { position: relative; text-align: center; }
#header > div { margin: 0 auto; }
#header > div div { display: inline-block; }
#header > div div:last-child { margin-left: 100px; }
#logo { width: 100px; position: absolute; top: 0; bottom: 0; background-image: url('logo.png'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#menu { width: 100%; }
#menu::after { content: '\000A'; white-space: pre; }
#social { text-align: right; }
#media screen and (max-width: 768px) {
#contact, #social { width: 100%; }
/* added these 2 rules */
#social { text-align: center; }
#header > div div:last-child { margin-left: 0; }
}
<!DOCTYPE html>
<html>
<head lang="en-au">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container" class="dtable">
<div id="header" class="dtrow">
<div>
<div id="logo"> </div><!--
--><div>
<span class="cblock" id="menu">
Link #0
Link #1
Link #2
Link #3
Link #4
Link #5
Link #6
Link #7
</span><!--
--><span class="cblock" id="contact">Phone</span><!--
--><span class="cblock" id="social">Social</span>
</div>
</div>
</div>
<div id="content" class="dtrow">
</div>
<div id="footer" class="dtrow">
<span class="cblock">© The three musketeers, 2017. Say hello to the UFO.</span>
</div>
</div>
</body>
</html>
It's not as good as LGSon's, because on smaller screen sizes it leaves a margin between the left side of the screen and id="contact" and id="social", which I am not sure how to fix. It could be useful in certain scenarios, however.
Hey all and thanks for taking the time to read,
I'm trying to create my online portfilo. I would like the navigation bar to have about a 10% margin from the top of the page. However, when I try a vertical scroll bar is added to the browser. I feel like this is something to do with setting the body, html to 100%. However, I'm not sure why the navigation bar isn't just applying that top margin to the content div its in instead of the whole page. All the other elements in the content div work fine.
-----------------------------------------------------------------------------
Below is my Code.
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
margin-top: 10%;
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
This is my first time posting on stackoverflow so sorry if I have posted this incorrectly or unclearly. Please advise me if so. Thanks again for your time.
Nevermind I solved it, I just placed a div with a height of 10% at the top of the page. Thanks anyway.
If you prefer not to add the extra div you could do the following: Remove the margin from the nav_bar and instead add a padding-top of 10% to the #content div, in combination with box-sizing: border-box you will no longer get the scroll bar.
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
box-sizing: border-box;
padding-top: 10%;
}
I believe collapsing margins are the reason for the behaviour you're seeing. Essentially, if you have an child element with a top margin within a parent element without a top border or any top padding, the child's margin will be applied to the parent element.
Notice how you don't see any red in the below snippet.
body {
background: #ccc;
padding: 20px;
margin: 0;
}
.parent {
background: red;
}
.child {
background: green;
margin-top: 50px;
}
<html>
<body>
<div class="parent">
<div class="child">
Hello!
</div>
</div>
</body>
</html>
How I'd approach the problem is to remove the top-margin on the navbar completely and add 10% padding-top to the body. You can use box-sizing: border-box to make the height declaration of 100% inclusive of padding:
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
body {
padding-top: 10%;
box-sizing: border-box;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
I just began to play around with HTML/CSS and I'm already stuck.
I tried to google my problem but I think I'm missing some keywords to find a solution. Why isn't the Link and Text inside <div id="NavContent>?
DEMO
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scrare</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<div id="NavContent">
<a id="Link" href="/">Link</a>
<div id="Text">Text</div>
</div>
</nav>
</body>
</html>
Once you set elements inside a div as float, they lost their influence on height attribute on parent element.
That said, you can:
Set a height for the div; or
Add a empty <div> after <div id="text"> but not inside, with style='clear: both;'
Easy fix is to add overflow: hidden; to #NavContent.
Or you can add the clearfix solution -
#NavContent:after {
content: "";
display: block;
clear: both;
}
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
#NavContent:after {
content: "";
display: block;
clear: both;
}
<nav>
<div id="NavContent">
<a id="Link" href="/">Link
</a>
<div id="Text">
Text
</div>
</div>
</nav>
<main>
</main>
<footer>
</footer>
There are few ways to solve your problem.
Add a suitable height to #NavContent element (like height:200px)
Or
set overflow property of #NavContent to auto
I'm attempting to insert a vertical line into my code that runs along a certain path of text.
My full code thus far is:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<section>
<h1> Test</h1>
</section>
<img src="thingvellir.jpg "class="vinstri" height="300" />
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And this is my CSS file:
body {
background-color:green;
}
div{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Now it's this last attribute that should make the vertical line, but what it does instead of trailing the text, is that it makes a vertical line along the WHOLE ORIGINAL div box (and for some reason adds black border around as well as pushing the text down) as displayed here.
Any ideas on how to fix this one? Thanks.
Your DIV rule applies to every DIV, both the one immediately inside BODY and your DIV.vert. So, the first DIV rule in your CSS, applying the full black border, applies to every DIV in your code. I'm assuming you only want this to apply to the top DIV instead, rather than to everything.
So give that top DIV it's own class, and update that first rule to use the class name.
This way, your DIV.vert box, where you want the red left line won't also pick up the additional CSS rules.
Updated HTML:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div class="main">
<section>
<h1> Test</h1>
</section>
<div class="vert">
<img src="thingvellir.jpg "class="vinstri" height="300" />
</div>
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And your CSS:
body {
background-color:green;
}
div.main{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?
CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
Home
<div class="menu_divider"></div>
Tutorials
<div class="menu_divider"></div>
About
<div class="menu_divider"></div>
Contact
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.
The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember.
I also tend to add zoom:1 for IE.
The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).
Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/
The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/
Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.