I have a horizontal div which is inside my header and is the width of my header. In this div I want to put 3 other divs of different sizes and line them all up together. I’ve tried everything and they keep falling outside the horizontal div.
It would seem that I could just use floats, but they wouldn’t work. The three divs are represented in the image by black, pink and white backgrounds. They are enclosed in login-breaking and are named login, search and breaking-marquee The site is down right now while I get this working but if you need to see it live I can open it up for you.
Here’s my header section:
/* Header Section */
/* Header Section */
#header {
margin:0px auto;
background-color:#e2e2e2;
width:1024px;
height:151px;
}
#header-logo {
float:left;
width:225px;
height:77px;
background:url({site_url}images/uploads/stfuandplaylogo.gif);
background-repeat:no-repeat;
margin:45px 40px 0px 28px;
}
#login-breaking {
width:1024px;
height:35px;
background-color:red;
margin:0 auto;
}
#login{
width:166px;
height:35px;
background-color:pink;
border-left:#ffffff;
margin-top:0;
margin-left:333px;
float:left;
}
#search{
width:333px;
height:35px;
background-color:#000;
margin:0;
margin-left:0;
float:left;
}
#breaking-marquee {
width:525px;
height:35px;
background-color:#ffffff;
margin-left:499px;
float:left;
}
#breaking-marquee p{
color:red;
font-family: 'Press Start 2P';
font-size:10px;
margin-top:10px;
margin-left:5px;
display:inline;
}
#breaking-marquee bm{
color:black;
font-family: 'Press Start 2P';
font-size:12px;
}
#navbar{
width:1024px;
height:28px;
background-color:#000;
position:relative;
top:123px;
background:url({site_url}images/uploads/nav-gradient.jpg) repeat-x;
}
Here’s an image of what it looks like:
divprobs
Here’s the html:
