I have two divs in my page end I want to center the second one between the first and the end ofthe page. Something like this:
| | | | | |
| | | | | |
| | div1 | |div2| |
| | | | | |
| | | | | |
"Div 2" is supposed to be centered between "div 1" and the end of the page. I tried everything I know and nothing worked.
My HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="teste.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="teste.js"></script>
<title>Example</title>
</head>
<body>
<div id="header">
<div class="title"">Example</div>
</div>
<div id="main-body">
<ul class="nav-tabs">
<li class="active-tab">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div id="right-menu"></div>
<footer>
</footer>
</body>
</html>
And my CSS:
/* Fonte Nunito a ser usada no título */
#import url(http://fonts.googleapis.com/css?family=Nunito);
/*----------------------------------------------*/
/* Cor do fundo da página */
body {
background-color: #cccccc;
}
/*----------------------------------------------*/
/* Header */
/* Cor e tamanho */
#header {
background-color: #669966;
background-size: cover;
height: 100px;
width: 100%;
clear: both;
margin: 0;
padding: 0;
position: relative;
}
/* Título */
#header .title {
color: #cccccc;
font-family: Nunito;
font-size: 50px;
font-style: italic;
line-height: 46px;
left: 60px;
top: 30px;
position: absolute;
}
/*----------------------------------------------*/
/* Tabs */
.nav-tabs {
background-color: #cccccc;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
/* Tab cells */
.nav-tabs li {
background-color: gray;
color: white;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
/* Tab ativa */
.active-tab {
background-color: white;
color: red;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
/*----------------------------------------------*/
/* Main body (this is "div 1")*/
#main-body {
background-color: white;
height: 100vh;
width: 900px;
margin: 5px 0 5px 100px;
display: inline-block;
}
/*----------------------------------------------*/
/* Menu à direita(this is "div 2") */
#right-menu {
border: 2px solid red;
background-color: yellow;
height: 30px;
width: 50px;
display: inline-block;
}
/*----------------------------------------------*/
/* Footah */
footer {
background-color: #333333;
height: 200px;
width: 100%;
margin: 0;
padding: 0;
}
Can someone help please?
[EDIT]
Thank you everyone who posted your solutions. The problem was solved!
You are getting close.
You need to make two outer divs that will, together, hold the full width of the page (one for the main column at say 70% wide, and one for the right column at 30% wide). Then inside your right column, place another div with fixed width and use text-align: center on the outer div.
If I understand you correctly, try this fiddle https://jsfiddle.net/9jrLat77/
CSS should be something like this
/* Fonte Nunito a ser usada no título */
#import url(http://fonts.googleapis.com/css?family=Nunito);
/*----------------------------------------------*/
/* Cor do fundo da página */
body {
background-color: #cccccc;
}
/*----------------------------------------------*/
/* Header */
/* Cor e tamanho */
#header {
background-color: #669966;
background-size: cover;
height: 100px;
width: 100%;
clear: both;
margin: 0;
padding: 0;
position: relative;
}
/* Título */
#header .title {
color: #cccccc;
font-family: Nunito;
font-size: 50px;
font-style: italic;
line-height: 46px;
left: 60px;
top: 30px;
position: absolute;
}
/*----------------------------------------------*/
/* Tabs */
.nav-tabs {
background-color: #cccccc;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
/* Tab cells */
.nav-tabs li {
background-color: gray;
color: white;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
/* Tab ativa */
.active-tab {
background-color: white;
color: red;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
/*----------------------------------------------*/
/* Main body (this is "div 1")*/
#main-body {
background-color: white;
height: 100vh;
width: 900px;
margin: 5px 0;
display: inline-block;
float:left;
}
/*----------------------------------------------*/
/* Menu à direita(this is "div 2") */
#right-menu {
border: 2px solid red;
background-color: yellow;
height: 30px;
margin: 5px 0;
width: calc(100% - 920px);
display: block;
float:right;
}
.content-wrapper {
width: 100%;
}
}
First put #right-menu before #main-body:
<div id="right-menu"></div>
<div id="main-body">
<ul class="nav-tabs">
The set/modify these CSS rules
#main-body {
margin:0 auto;
display:block;
}
#right-menu {
position: absolute;
right: calc(((100% - 900px) / 4) - 25px);
}
The right: calculation works like this: From the full page width (100%) we remove the main width (900px); this give us the remaining width for both sides (left and right) so we divide it by two to have the width of one side then divide it by two again to have half of the size of one side. This will give us the exact position center of the free space on the left or the right (you can change the right: property to left: so you'll center it on left. Finally to center the element itself we subtract half of the right menu width (50px / 2 = 25px).
You should try working with bootstrap. Its a framework that makes it alot easier to format your page. you can set it up by including these lines in your code:
Bootstraps "container" has a width of 12. So if you set up the first div with a width of 5 and your second div width of 3 then you could set it up like this:
<div id="container">
<div id="row">
<div id="col-md-5">div 1 </div>
<div id="col-md-3 col-md-offset-2"> div 2 </div>
</div> </div>
the md part stands for medium and can be any size you want (xs, sm, md, lg)
the offset is due to the fact that you have 12 width so you have to move it over 2 to center it if the widths are 5 and 3.
Use this:
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#right {
background-color: #ff0000;
float: right;
height: 500px;
margin: 0px;
padding: 0px;
width: 300px;
}
#main {
background-color: #0000ff;
height: 500px;
margin: 0px;
padding: 0px;
width: 900px;
}
</style>
<div id="right"></div>
<div id="main"></div>
<script type="text/javascript">
window.onload = setMargin;
window.onresize = setMargin;
function setMargin() {
var x = window.innerWidth;
var y = x - 900 - 300;
var z = y / 2;
document.getElementById("right").style.marginRight = z;
}
</script>
The simplest method here I feel is to have a wraooing div on the right hand side that takes up the remaining width...then center the menu block inside that.
I've used floats here (rather than inline-block) for simplicity as the white-space affect the calc values unless you reset them.
* {
box-sizing: border-box;
}
/* Main body (this is "div 1")*/
#main-body {
background-color: lightgrey;
height: 100vh;
width: 900px;
margin-left: 100px;
margin-right: 5px;
float: left;
}
/*----------------------------------------------*/
/* Menu à direita(this is "div 2") */
#right-wrap {
background: #bada55;
width: calc(100% - 1005px);
float: left;
text-align: center;
}
#right-menu {
border: 2px solid red;
background-color: yellow;
height: 30px;
width: 50px;
display: inline-block;
}
<div id="main-body">
<ul class="nav-tabs">
<li class="active-tab">Home
</li>
<li>Menu 1
</li>
<li>Menu 2
</li>
</ul>
</div>
<div id="right-wrap">
<div id="right-menu"></div>
</div>
Codepen Demo
Related
I am building a navigation bar that has a lot of options and special sections.
I worked with Twitter Bootstrap, but it is difficult to develop.
The nav html tag has 3 sections grouped in 3 divs (left, center, right).
I am having difficulty in centring horizontally the text and logo of the company in left div, anchors with navigation items in the right div.
I need the height of navigation bar to be set in the CSS and not the calculate the height based of the child elements.
This is the html:
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
}
.left-navbar {
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
}
.right-navbar {
float: right;
background: maroon;
height: 100%;
/* float: right;
position: absolute;
top: 50%; right: 0%;
transform: translate(-50%,-50%);
background: gold;
padding: 1.5rem; */
}
.center-navbar {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: gold;
padding: 1rem;
}
.left-navbar strong {
color: red;
padding: 10px 10px;
display:inline-block;
text-align: center;
vertical-align: center;
}
.left-navbar img {
width: 32px;
height: 32px;
padding: 10px 10px;
}
.navbar a {
float: right; /* Orientation of the element in the parent element */
display: block; /* All over top left right bottom it is a block - element has block/padding all over the embedded element */
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /* 14px top and bottom, 16px right and left */
text-decoration: none; /* Could be underline, overline, line-through */
font-size: 17px;
}
/* Apply only for anchors inside the navbar class */
.navbar a:hover {
background: #ddd;
color: black;
}
input[type="text"]{ padding: 5px 5px; line-height: 28px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar">
<div class="left-navbar">
<strong>Company</strong>
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/newsvine-512.png"></p>
</div>
<div class="center-navbar">
<input type="text" id="name" name="name" required height="45px;"
minlength="4" maxlength="40" size="40">
</div>
<div class="right-navbar">
Home
News
Contact
</div>
</nav>
Any working fiddle with best practices is ideal for me.
Thank you!
You can use flexbox to achieve this
.right-navbar, .left-navbar{
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen, let me know if that help!
Give .left-navbar - horizontal and vertical centering with display:flex;
.left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
Also, how do you want the right part of the navbar?
Flex-box is what you'll want to use here. Add display: flex to the .navbar and then add flex-grow: 1; to the center piece. This essentially says 'make this element span the remaining space in the flex container. Also, your height: 100% were unnecessary, so I removed them.
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
display: flex;
}
.left-navbar {
background: cadetblue;
width: 230px;
text-align: center;
}
.right-navbar {
background: maroon;
}
.center-navbar {
background: gold;
padding: 1rem;
flex-grow: 1;
}
input[type="text"]{
padding: 5px 5px;
line-height: 28px;
width: 100%;
box-sizing: border-box;
}
im getting a white space when im putting text into the div. How to remove that ? i would like to ask you aswell how to make the text "welkom op dennis website" automatic center in the middle of the div.
here you can see the code :
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 550px;
color: white;
font-family: Arial;
font-size: 25px;
{}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
The space between your navigation and blue text field is from collapsing margins. You'll need to remove the margins created by your <p> element in .top, more on Collapsing Margins.
If you need the text vertically centered as well, you can use relative positioning and translate.
Other Notes
<text> is not a valid HTML element, use <p>, <span>, <div>, <a> etc. instead. I switched it to an <a> in my answer.
I see that you're using percentage heights. Those can be tricky. In order for percentage heights to work a height has to be set on the parent element. If that parent element's height is a percentage, then it's parent needs a height set. So on and so forth all the way to the root element <html> if percentages are used. In my answer I switch the heights to px values.
A number of block level elements (<div>, <nav>) had width: 100%; applied to them, I removed them as they're not needed. A block level element will always take up 100% width of it's containing element by default.
To vertically center your navigation items I set the line-height of the <a> elements equal to the height of the <nav> element.
I removed your .container element as it wasn't doing anything useful. You might need it later (likely in a different location) if you decide to add media queries and limit it's width for various viewport sizes.
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 45px;
background-color: white;
}
.top {
height: 300px;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav .logo {
float: left;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 0 20px;
text-decoration: none;
line-height: 45px;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
p.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: white;
font-family: Arial;
font-size: 25px;
text-align: center;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="nav">
<a class="logo" href="#">Dennis Zwart</a>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</body>
This is because p element has natural margins (defined by browser). Remove it:
p {
margin-top: 0;
}
Then remove the p horizontal padding and center your text with
text-align: center;
In order to remove the blank area on the right side of the screen.
p {
margin-top: 0;
text-align: center;
}
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 0px;
color: white;
font-family: Arial;
font-size: 25px;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
I want to say that I've tried everything, but I refuse to believe that's true. I'm trying to vertical-align an image inside a div. Although it looked like it worked, I noticed there was more space above the image than below.
After some debugging, I found that box-sizing: border-box was the problem. But because I'm using Bootstrap (and it seems it relies on it), I can't change it.
See my snippet below. Click 'Toggle box-sizing' to turn box-sizing on or off.
var toggled = false;
$('#toggle').on('click', function() {
if (!toggled) {
$('*').css('box-sizing', 'border-box');
toggled = true;
} else {
$('*').css('box-sizing', 'initial');
toggled = false;
}
});
.left-sidebar {
width: 180px;
background-color: #34495e;
}
.left-sidebar .user-menu {
height: 80px;
position: relative;
padding: 0 15px;
color: #fff;
line-height: 80px;
border-bottom: 2px solid #3d566e;
}
.left-sidebar .user-menu img {
vertical-align: middle;
border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
margin-left: 5px;
font-size: 16px;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Toggle box-sizing</button>
<nav class="left-sidebar">
<div class="user-menu">
<img src="https://placehold.it/50x50">
<span class="user-info">Someone</span>
</div>
</nav>
<!-- .left-sidebar -->
I hope you guys can help me out.
Not sure if you can use flexbox but here's a way to keep it centered.
var toggled = false;
$('#toggle').on('click', function() {
if (!toggled) {
$('*').css('box-sizing', 'border-box');
toggled = true;
} else {
$('*').css('box-sizing', 'initial');
toggled = false;
}
});
.left-sidebar {
width: 180px;
background-color: #34495e;
}
.left-sidebar .user-menu {
display: flex; /* added */
align-items: center; /* added */
/* height: 80px; || removed */
line-height: 80px; /* kept */
/* position: relative; || removed */
padding: 0 15px;
color: #fff;
border-bottom: 2px solid #3d566e;
padding-top: 4px; /* added to negate border-bottom */
}
.left-sidebar .user-menu img {
/* vertical-align: middle; || removed */
border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
margin-left: 5px;
font-size: 16px;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="toggle">Toggle box-sizing</button>
<nav class="left-sidebar">
<div class="user-menu">
<img src="https://placehold.it/50x50">
<span class="user-info">Someone</span>
</div>
</nav>
<!-- .left-sidebar -->
fiddle
https://jsfiddle.net/Hastig/efoyyms4/7/
Border bottom is making problem. Try to replace
border-bottom: 2px solid #3d566e; with
box-shadow: 0 2px 0 #3d566e;
JSFiddle example
The problem was you set height to be 80px and border as a solid 2px this means your line-height:80px line needs to be 78px for your intended result (80 - 2)
.left-sidebar {
width: 180px;
background-color: #34495e;
}
.left-sidebar .user-menu {
height: 80px;
position: relative;
padding: 0 15px;
color: #fff;
line-height: 78px;
border-bottom: 2px solid #3d566e;
}
.left-sidebar .user-menu img {
vertical-align: middle;
border-radius: 50%;
}
.left-sidebar .user-menu .user-info {
margin-left: 5px;
font-size: 16px;
font-weight: 300;
}
<nav class="left-sidebar">
<div class="user-menu">
<img src="https://placehold.it/50x50">
<span class="user-info">Someone</span>
</div>
</nav>
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
Sorry to ask for css help again but I really can't get this one. My issue is that a sub div goes outside of an upper div's region. I tried using:
display: inline-block;`
but that makes the outer div go crazy.
My Problem:
There is a div with the id of sidebar, which contains the left boxes. which is inside another div with the id of main.
html:
<div id="main">
<div id="sidebar">
<div id="box">
<h3>Recently Uploaded</h3>
<ul>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
</ul>
</div>
...
css:
#main
{
width: 80%;
height: 100%;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .4);
margin-left: auto;
margin-right: auto;
}
#sidebar
{
height: 100%;
width: 20%;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 60px;
}
#box
{
/* min-width: 12em; idk if I wanted this */
width: 100%;
background-color: #F8F8F8;
border: 1px solid #000;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#box p
{
padding: 10px;
}
#box h3
{
margin: 0;
margin-top: 5px;
padding-left: 10px;
border-bottom: 1px solid #000;
font-size: 12pt;
font-weight:bold;
}
#box ul
{
font-size: 10pt;
margin: 0;
padding: 0;
list-style: none;
}
#box ul li
{
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #000;
}
anything I can do? :(
A solution which should work cross-browser and have extremely good browser support would be to apply the following to your #main div:
#main{
...
overflow: hidden;
}
Using this will force any floated elements to be calculated into the container's height when drawing its background, borders, etc.
Try this :
display:table; /* TO our main ID */
try adding float: left; to #main