How to position div(s) within a div?

combustion

08-24-2009, 07:34 AM

Hi,
I'm a CSS and HTML noob.

This is my code:
#DIV1 {width: 770px;height: x;border-width: 1px; border-style:solid; border-color: #00000;background-color: #FFFFFF}

#DIV2 {width: 200px;height: auto;background-color: #FFFFFF; text-align:center;}

#DIV3 {width: 560px;height: auto;background-color: #FFFFFF; text-align:center;}

<div align="center"><div id="DIV1"><p>
<h1>Introductions</h1><b>texttexttext</b>

<div align="right"><div id="DIV2">
<h2>testing</h2>
text <b>bold</b> <i>italic</i> <u>underline</u></div></div>

<div align="left"><div id="DIV3">
<h2>Testing</h2>
text <b>bold</b> <i>italic</i> <u>underline</u></div></div>

Looks like this:
http://img229.imageshack.us/img229/2744/codeu.png

How do I make it look something like this:
http://img197.imageshack.us/img197/626/codee.png
(I used paint to edit this, it's hard to express what I want in words so I just do pictures)

Please help.

abduraooft

08-24-2009, 07:37 AM

Take a look at http://bonrouge.com/2c-hf-fluid(r).php

knotbuilder

08-24-2009, 03:33 PM

I think that your DIV 1 is too wide and therefore pushing it to the bottom. Try only having the DIV 1 be 760 px wide.

Scriptet

08-24-2009, 07:47 PM

The align attribute is depreceated an can be re=created with CSS.

Use float:left; float:right To align DIV's to the left and right
And use margin: 0 auto; to center a DIV with an assigned width
or text-align:center; to center in-line elements, e.g span img a

jolly_nikki

08-25-2009, 01:22 AM

<html>
<head>
<style>
#DIV2 {
float:left;
margin-top:0px;
width: 560px;height: auto;background-color: #FFFFFF; text-align:center;
}
#DIV3 {
float:left;
width: 200px;height: auto;background-color: #FFFFFF; text-align:center;
margin-left: 10px;
}

#DIV1 {
width: 780px; border: 2px solid black;
background-color: #53868B;
padding: 0px;
margin: 0px;
}

#main_container{
width: 780px;
margin: auto;
}

#DIV1 span{
font: bold 28px "BRUSH SCRIPT MT", "Lucida Grande", "Verdana", "Arial", sans-serif;
}

#DIV2 h2{
border-bottom: 2px solid #53868B;
text-align:left
}

#DIV3 h2{
border-bottom: 2px solid #53868B;
text-align:left
}
</style>

</head>
<body>
<div align="center">
<div id="DIV1">
<span>Introductions</span>
</div>
<b>texttexttext</b>
</div>
<div id = "main_container">
<div id = "DIV2">
<h2>Testing</h2>
text <b>bold</b> <i>italic</i> <u>underline</u>
</div>
<div id ="DIV3">
<h2>testing</h2>
text <b>bold</b> <i>italic</i> <u>underline</u>
</div>
</div>
</body>
</html>