Previous Message
Next Message

Is it possible to create this type of a layout with CSS?

Sent by Melissa Brands on 12 September 2005 18:06

Hi all

I ran into an interesting problem that I don't have an answer to (I went 
through lots of CSS tutorials but still don't know how to do this).

I have a "header" div and inside of it, I'd like to place 3 boxes (div's). 
One on the left (logo) and two on the right (search + navbar). It looks 
something like this (this is just a mockup... I'd like to create the layout 
before I start with graphics):

I tried implementing this and it always "blows up" in either IE or Firefox. 
Is there an easy way to do this? I somehow have to squeeze 3 divs into one 
div and 1 has to be on the left and two on the right (one under each other).. 
No brainer would be to split it horizontally in half but then my logo will 
be messed up (it has to be clickable).

Here's some CSS that I have:

/* container encloses everything */

#container {
width: 818px;
\width: 838px;
w\idth: 818px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: white;

#header {
padding: 0px;
margin-bottom: 0px;
height: 132px;
background: white;

/* logo, search and nav are inside the header */
#logo {
float: left;
padding-left: 25px;
width: 200px;

#search {
/* position: relative; */
top: 0px;
left: 0px;
width: 160px;
float: right;
margin-right: 15px;
margin-top: 55px;

ul#nav {
position: relative;
top: 42px;
left: 352px;
width: 237px;
margin: 0;
height: 15px;
list-style-type: none;
overflow: hidden;

What says you, CSS deities? How do I do this properly? :)

Thanks in advance!!!

Melissa Brands
css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: