Div layout problems

Hi,

I'm having my first go at div layouts on a design I'd rather use tables for. It's a very simple design, and I'm getting quite close to what I want, but I've been confounded by a number of things and wondered if anybody could offer some help.

The layout is essentially 4 "rows". The first 3 rows are divided into 2 "columns". The final row is a single column, acting as a footer. I'm putting a small transparent gap of 2px between each row, and between the 2 columns of the first 3 rows.

The top row's divs will contain images and are both fixed size. In the 2nd row's divs, the first column will hold an unordered list for navigation, the second will hold an image of fixed size.
The 3rd row will both contain text, and will not have height specified, but will both be as wide as the divs immediately above them.
The final row is a single column and will contain text, and will be as wide as the entire mess above.

The HTML is:
<!-- Whole Site -->
<div id="container">

<!-- Header -->
<div id="wrapperhead">
<div id="logo"><img src=".jpg" /></div>
<div id="title"><img src=".jpg" /></div>
</div>

<!-- Navigation -->
<div id="wrappernav">
<div id="navigation">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="picture"><img src=".jpg" /></div>
</div>

<!-- Content -->
<div id="wrappercontent">
<div id="testimonial"></div>
<div id="content"></div>
</div>

<!-- Footer -->
<div id="wrapperfooter">
<div id="footer"></div>
</div>
</div>

My CSS is:
#container{
width: 630px;
}
#wrapperhead{
width: 630px;
}
#wrappernav{
width: 630px;
}
#wrappercontent{
width: 630px;
}
#logo{
width: 180px;
height: 100px;
float: left;
}
#title{
width: 450px;
height: 100px;
float: right;
}
#navigation{
width: 180px;
height: 150px;
float: left;
}
#picture{
width: 450px;
height: 150px;
float: right;
}
#testimonial{
width: 180px;
height: 150px;
float: left;
}
#content{
width: 450px;
height: 150px;
float: right;
}
#footer{
width: 630px;
}

Now, the questions:
Firstly, I am not able to produce the 2px transparent gap between each div in any robust way. Margin-bottom works in IE, but not in FF. Border's work, but not without their problems.
Secondly, when I add a 450x150px jpg to #picture, the div next to it appears slightly shorter in both IE and FF.
Thirdly, when I add the <ul> to #navigation, I seem to have very little control over its placement.
Lastly, I am not able to align the entire site in the centre of the browser without using an overly complicated method which doesn't respond well to the browser window being made very narrow (and therefore not to small screens).

I am very tempted to go back to a table design, but thought I would ask online as someone brighter than me might be prepared to help.

Lee

The are the screen images from your code using my own jpg.s
Are they wrong. Have I understood what you are after?:confused:

Frank

A link to an online example would help here as it’s hard to tell you what’s best to do without seeing any images and/or content at all.

Today’s approach in web development is:

Have some content and mark it up with semantic HTML (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html).
Get the full information and functionality properly working (without having used any CSS or JavaScript yet).
Style the content with CSS.


Now, try this for centering the site:

#container {
width: 630px;
margin: auto;
}


Secondly: The semantic approach also means that we separate content from design and this means that all images that are only for the site design, i.e. images that are not directly related to the understanding of the content/information on the site have to be applied through CSS (background images). On this note I think you’re still too much thinking in tables and I suspect that the separation of #logo and #title is redundant. You could easily remove those two divs and have the title either as h1 or still as HTML image in #wrapperhead (since it’s a logo we can make an exception here), and the image you’re currently using in #title applied as background to this #wrapperhead.

In the same way, you should ponder about how to apply the image in #picture. Is the picture indispensible for the understanding of the site/content or is it just to make the page look pretty? If the latter one is the case it has to be put as background image. The advantage is that you can put anythin in that div as actual content and the image won’t be in the way.

Thirdly: Read some tutorials about floats to learn why a bottom margin isn’t working here. Basically by floating the divs within the wrapper divs, the wraper divs collapse to zero (apply a background color and a height to #wrappernav, for example, to see the effect). You would need to apply a bottom margin to these floated elements in order to get some space. Containing floats (http://complexspiral.com/publications/containing-floats/) are a solution – and maybe that article I just linked to helps you understand floats in general.

Border's work, but not without their problems.

And what are those problems if I may ask? In case you’re not aware of it: a border adds to the overall size of an element.

Secondly, when I add a 450x150px jpg to #picture, the div next to it appears slightly shorter in both IE and FF.

Actually the div in which you put the image will get longer and here’s why: http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Thirdly, when I add the <ul> to #navigation, I seem to have very little control over its placement.

Lists have a default margin and/or padding which differs in different browsers. Set both to zero for cross browser consistency and start adding from there if necessary.

I hope that helps a little.

The are the screen images from your code using my own jpg.s
Are they wrong. Have I understood what you are after?:confused:

Frank

Hi Frank,

That's pretty much what I'm going for, yes. What have you used to create the gaps between the images?
Also, I noticed I left height properties in the CSS for the #testimonial and #content divs. Those will be removed, as those divs are not fixed-height.

Hi Stephan. Thanks for replying so thoroughly.

Regarding the first two 'cell's' (obviously I am thinking too much of tables hehe), #logo will serve up the company's logo. #title will actually have an image applied through CSS as a background. On top of that, I will print the current page's title as a H1.

On a similar note, although #picture's picture is partially decorative, it is intended to summarise the page's content. Whilst not indispensable, I would like to stick to this idea as it's not only visually pleasing but also will help emphasise the 'corporate ethos' related to that page.

The problems of borders were quite diffuse. And I was also adding margins and padding. In my frustration, I didn't take a particularly critical approach to finding out which problems were caused by which. Sorry, I simply can't remember. Hope this doesn't make you think I'm a time waster. I simply got quite frustrated and only included that line to indicate I had tried several things.

Thanks a lot for the links. I'm just about to check both of them out. I found searching for help on divs, annoyingly, brought up tons of MySpace tutorials and templates.

In the absence of a decent result so far to indicate my progress, I've created a mock-up graphic to show what result I'm trying to achieve.