asked on

Building a layout using css div?

Hello,

I wondered if anyone could advise, in my html code I have a div for the main content area.

<div id="content">
</div>

I am trying to build a layout in the content similar to these images:

http://www.members.aol.com/antoniryszard/layout-test.jpg
http://www.members.aol.com/antoniryszard/layout-test.bmp

Could anyone advise how best to divide the content to achieve this, would there be any css functions to draw a border?

Thank you

JamesCssl

#content {
border:1px solid black;
}

would give you a border.

AntoniRyszard

ASKER

Hello,

This image shows the type of layout I am trying to achieve, the page has a header and footer. This part will form the middle section the content.

http://www.members.aol.com/antoniryszard/layout-image.jpg

I have already created a div content

<div id="content">
</div

Could anyone advise how I could best divide the content div to achieve my layout. I was thinking of dividing the content to a float left and right? And then dividing the left, in two again?

Thank you

ASKER CERTIFIED SOLUTION

opho

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AntoniRyszard

ASKER

Thank you,

Could I possible ask how you would divide <div id="intro">

To display both boat image and next to this the text begining, Born as an idea... goes here

http://www.members.aol.com/antoniryszard/layout-image.jpg

opho

You don't need to split that div, because you can make the image float to the right of that div. Your img tag would look something like:

<img class="floatright" src="....yadda yadda" />

and you can add this to the style info:

img.floatright {
float:right;
}

and, you'll probably end up tweaking how you contruct and style the text on the left, because once the image is floated, it doesn't force the height of the intro div to match its height...

--Steve