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


AntoniRyszardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JamesCsslCommented:
#content {
border:1px solid black;
}

would give you a border.
0
AntoniRyszardAuthor Commented:
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
0
ophoCommented:
Here's a start, if I get your drift:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content=
 "text/html; charset=us-ascii" />
<style type="text/css">
body {
text-align:center;
}
#content {
margin: 10px auto;
padding:5px;
width:750px;
text-align:left;
border:1px solid blue;
background:#ddd;
}
p {
margin-bottom:10px;
}
#services {
width:240px;
float:right;
border:1px solid red;
background:#eee;
}
#intro {
margin:0 10px;
border:1px solid red;
margin-right: 250px;
background:#eee;
}
.clear {
clear:both;
height:10px;
}
</style>
 <title></title>
</head>
<body>
 <div id="content">
  <p>Lorem Ipsum is simply dummy text of the printing and
  typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown printer
  took a galley of type and scrambled it to make a type specimen
  book. It has survived not only five centuries, but also the leap
  into electronic typesetting, remaining essentially unchanged. It
  was popularised in the 1960s with the release of Letraset sheets
  containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of
  Lorem Ipsum.</p>
  <div id="footer">
   <div id="services">
    service boxes go here<br />
    <br />
    <br />
    <br />
   </div>
   <div id="intro">
    Born as an idea... goes here
   </div>
  </div>
  <div class="clear"></div>
 </div>
</body>
</html>

--Steve
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AntoniRyszardAuthor Commented:
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
0
ophoCommented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.