Not sure how to align 3 seperate DIVs next to each other

[anagoge]

I'm a novice when it comes to CSS/XHTML so forgive me if this is a simple problem. Firstly, here's what the site should look like (http://www.theworkof.co.uk/test/example.gif).

And here's what it currently looks like (http://www.theworkof.co.uk/test/index.html).

My problem is with the "Who" "What" "Where" and "Why" DIVs. Although I know they look aligned currently, that's only because I've used position: relative and minus positions to get them all to look right, along with setting height: 200px for #artworkdescription and I know this isn't the right way of doing this. I'm just wondering how I should do it.

In the CSS, you'll find the following code:

#artworkdescription {
position: relative;
top: 15px;
width: 948px;
height: 200px;
border: 1px solid #CCCCCC;
background: #f2f2f2;
background-image: url(descriptionbg.gif);
background-repeat: repeat-y;
}
#artworkwho {
position: relative;
top: 0px;
left: 12px;
width: 125px;
border: 0px;
}
#artworkwhat {
position: relative;
top: -68px;
left: 140px;
width: 125px;
border: 0px;
}
#artworkwhere {
position: relative;
top: -136px;
left: 300px;
width: 125px;
border: 0px;
}
#artworkwhy {
position: relative;
top: -210px;
left: 485px;
width: 460px;
border: 0px;
}
.whowhatwheretext {
font-size: 12px;
}
#divider {
position: relative;
width: 950px;
top: 0px;
margin: 0 auto;
border: 0px;
height: 31px;


#artworkdescription is the two tone grey box that houses the who/what/where/why. #artworkwho/what/where/why are the DIVs I'm having trouble with.

In the HTML, I've put this:

<div id="artworkdescription">
<div id="artworkwho"><h1>Who</h1>
<p class="whowhatwheretext">Mind</p>
</div>

<div id="artworkwhat"><h1>What</h1>
<p class="whowhatwheretext">Annual Report</p>
</div>
<div id="artworkwhere"><h1>Where</h1>
<p class="whowhatwheretext">No website</p>
</div>
<div id="artworkwhy"><h2>Why</h2>

<p>Lorem Ipsum is simply dummy text.</p></div>
<div id="divider"><img src="divider.gif" alt="Divider" width="950" height="31" /></div>
</div>

I'd also like to know how I can get #divider to go directly underneath #artworkdescription, even if/when the box gets taller because there's more text in it.

I hope that's clear enough. Many thanks for your help.

[Coyotelab]

CSS:#divider {
border:0 none;
height:31px;
margin:0 auto;
padding-top:30px;
position:relative;
top:0;
width:950px;
}
HTML:<div id="artworkdescription">
<div id="artworkwho"><h1>Who</h1>
<p class="whowhatwheretext">Mind</p>
</div>

<div id="artworkwhat"><h1>What</h1>
<p class="whowhatwheretext">Annual Report</p>
</div>
<div id="artworkwhere"><h1>Where</h1>
<p class="whowhatwheretext">No website</p>
</div>
<div id="artworkwhy"><h2>Why</h2>

<p>Lorem Ipsum is simply dummy text.</p></div></div>
<div id="divider"><img src="divider.gif" alt="Divider" width="950" height="31" /></div>

[anagoge]

I've added the missing </div> and the top padding to divider, thanks. Can you help with the other main problem please? I've taken off position: relative on the four DIVs that I'm having problems with so that the problem is more obvious, if you would like to reload the page.

[Coyotelab]

That solution was based on the setting you had, just put your "position: relative;" back to its original before my post and it will work the way you want. "Edit: You can use float instead of positioning for inside divs"

[anagoge]

"Edit: You can use float instead of positioning for inside divs"

I added the floats as suggested but now the #artworkdescription's background doesn't show. Reload the page to see what I mean. What would you suggest?

[anagoge]

Ok, I've taken the floats off, but readded the position: relative. But that doesn't work either because #artworkdescription is trying to accomodate the height of #artworkwho/what/where/why. I can't put a specific height on #artworkdescription because I want that box to be able to be taller when there's more text to fit in the light grey area.

Is there an easier way I could be doing this instead of the set up I have now?

[opifex]

first fix the #footer (spelling "postition", missing ";")


#footer {
position: relative;
width: 100%;
height: 50px;
background: #000000;
margin: 0 auto;
border: 0px;
text-align: center;
}


close the "container" div

replace the #artworkwho, #artworkwhat, #artworkwhere, #artwhy with:

#artworkwho, #artworkwhat, #artworkwhere {
position: relative;
margin-left: 1.2%;
width: 16%;
border: 0px;
display: block;
height: 200px;
float: left;
}
#artworkwhy {
position: relative;
margin-left: 2%;
margin-right: 2%;
width: 43%;
border: 0px;
display: block;
height: 200px;
float: right;
}

adjust widths as needed!!!

add clears in #divider
#divider {
position: relative;
width: 950px;
top: 0px;
margin: 0 auto;
border: 0px;
height: 31px;
clear: both;
}

valid css and works in ff,ie,opera,safari

[anagoge]

Thank you for the futher help, opifex. However, I'm still having some trouble. #artworkdescription's background is still not showing, even after rewriting the CSS as you suggested.

I haven't closed the container DIV because I'm not sure where the closing tag should go. Could you please point out where it should go? And if this is the reason why the above won't work then I do apologise.

[Coyotelab]

#artworkdescription {
background:#F2F2F2 url(descriptionbg.gif) repeat-y scroll 0 0;
border:1px solid #CCCCCC;
height:auto !important;
height:220px;
min-height:220px;
position:relative;
top:15px;
width:948px;
}

[anagoge]

#artworkdescription {
background:#F2F2F2 url(descriptionbg.gif) repeat-y scroll 0 0;
border:1px solid #CCCCCC;
height:auto !important;
height:220px;
min-height:220px;
position:relative;
top:15px;
width:948px;
}

Ok, that seems to have done the trick! I just have to sort out the widths and I think that's it. Thank you for your help. As a novice, it's really frustrating trying to build a page (I'm a designer, not a coder) so I really do appreciate your help.

[anagoge]

Oh, no wait. The box doesn't resize when there's more or less text in #artworkwhy. Suggestions? :S

[Coyotelab]

hey no problem at all : ) I'm not sure what are you going to do with footer but you can use the trick called sticky footer (http://ryanfait.com/sticky-footer/)
Edit: ok change the height to 100%height:auto !important;
height:100%;
min-height:220px;
inside text doesn't look all right in IE 7 & 6 you gotta use some conditional statement for that

[opifex]

the easiest way for a "designer" (read "graphics designer") to code a page is to start from zero and get your divs aligned to match the layout you want. use high contrast colors so you can really note any small problems and then put the graphics in place. attempts to adapt existing designs to a new design can be a real headache for the most seasoned coder - i see very few "templates" that validate both (x)html and css and it really IS important. (ask my students!)

[anagoge]

Sorry to ask for one more thing, but what can I do to make sure that I can resize #artworkwhy and make #artworkdescription taller as neccessary? Currently, if there's too much text in #artworkwhy, it flows over #artworkdescription. I've added too much text as an example, if you would like to reload the page. Thanks again.

[Coyotelab]

keep forgetting add display inline for the text that helps too

[anagoge]

Ok, so I've got this currently:


#artworkdescription {
position: relative;
top: 15px;
width: 948px;
border: 1px solid #CCCCCC;
height:auto !important;
height:100%;
min-height:220px;
background: #f2f2f2;
background-image: url(descriptionbg.gif);
background-repeat: repeat-y;
}

But that didn't seem to do anything. Reload the page and you'll see that the text is still flowing out of #artworkdescription.

[Centauri]

Stop setting heights and clear floats if you want things to stop overlapping :#artworkdescription {
position: relative;
top: 15px;
width: 948px;
border: 1px solid #CCCCCC;
overflow: hidden;
background: #f2f2f2;
background-image: url(descriptionbg.gif);
background-repeat: repeat-y;
}
* html #artworkdescription {
height: 1%;
overflow: visible;
}
#artworkwho, #artworkwhat, #artworkwhere {
margin-left: 1.2%;
width: 14%;
border: 0px;
float: left;
}
#artworkwhy {
margin-left: 2%;
margin-right: 2%;
width: 46.5%;
border: 0px;
float: right;
}

[Coyotelab]

Cent is right, also you can use the following which have div's aligned in right way.

<div id="container">
<div id="header"><img src="logo.gif" alt="Logo" width="300" height="104"></div>
<div id="mainContent">
<div id="navcontainer">
<ul id="nav">
<li id="navtheworkof"><a href="http://www.theworkof.co.uk">The Work Of</a></li>
<li id="navthewordsof"><a href="/blog">The Words Of</a></li>
<li id="navwhoisnm"><a href="/bio/bio.html">Who Is Neil Martin?</a></li>
</ul>
</div>
<div id="contactinfo">email: neil@theworkof.co.uk</div>
<div id="artworkcontainer">
<div id="artworkthumbnail"><img src="thumbnail.gif" alt="Thumbnail" class="artworkborder" width="948" height="298"></div>
<div id="artworkdescription">

<div id="artwork">
<div id="who"><h1>Who</h1>
<p class="whowhatwheretext">Mind</p>
</div>
<div id="what"><h1>What</h1>
<p class="whowhatwheretext">Annual Report</p>
</div>
<div id="where"><h1>Where</h1>
<p class="whowhatwheretext">No website</p>
</div>
</div>
<div id="artwork2">
<div id="why"><h2>Why</h2>
<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. 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. 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</p></div></div>
<div id="divider"><img src="divider.gif" alt="Divider" width="950" height="31"></div></div>
<!-- end #mainContent --></div>
<!-- end #container --></div><div id="footer"><img src="logo.gif" alt="Logo" width="300" height="104"></div>
</div>
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-color: #FFFFFF;
}
#header {
width: 100%;
height: 105px;
background: #000000;
margin: 0 auto;
border: 0px;
text-align: center;
}
#footer {
position: relative;
width: 100%;
height: 104px;
background: #000000;
margin: 0 auto;
border: 0px;
text-align: center;
}
#contactinfo {
position: relative;
width: 175px;
top: -110px;
left: 385px;
margin: 0 auto;
border: 0px;
text-align: right;
background: #000000;
color: #CCCCCC;
}
#artworkcontainer {
width: 100%;
margin: 0 auto;
border: 0px;
text-align: left;
}
#artworkthumbnail {
width: 950px;
margin: 0 auto;
}
.artworkborder {
border: 1px solid #CCCCCC;
}
#artworkdescription {
position: absolute;
margin-top: 15px;
width: 948px;
border: 1px solid #CCCCCC;
height:auto;
background: #f2f2f2;
background-image: url(descriptionbg.gif);
background-repeat: repeat-y;
}
#artwork{
width: 470px;
display: block;
float: left;
height: 220px;
}
#who{width: 14%; float:left; margin-right:100px; padding-left: 30px;}
#what{width: 14%; float: left; margin-right:100px;}
#where{width: 14%; float: left;}
#artwork2 {
width: 470px;
display: block;
float: right;
}
#why{width: 90%; float:left; padding-left: 25px;}
.whowhatwheretext {
font-size: 12px;
}
#divider {
position: relative;
width: 950px;
height: 31px;
top: 20px;
}
.oneColFixCtr #container {
width: 100%;
background: #FFFFFF;
margin: 0 auto;
border: 0px;
text-align: left;
}
.oneColFixCtr #mainContent {
width: 950px;
height: 2000px;
padding: 0 0px;
margin: 0 auto;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
line-height: 18px;
}
h1 {
font-size: 24px;
color: #00416a;
font-weight: normal;
}
h2 {
font-size: 24px;
color: #b20000;
font-weight: normal;
}
#navcontainer {
position: relative;
left: 626px;
top: -10px;
width: 314px;
height: 26px;
padding: 0;
margin: 0px 0 0px 0;
}

#nav {
position: absolute;
top: 10px;
left: 10px;
list-style: none;
margin: 0;
padding: 0;
height: 314px;
display: inline;
overflow: hidden;
width: 314px;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a {
float: left;
padding: 26px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:26px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -26px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#navtheworkof a {
width: 90px;
background: url(theworkof.gif) top left no-repeat;
}

#navthewordsof a {
width: 97px;
background: url(thewordsof.gif) top left no-repeat;
}

#navwhoisnm a {
width: 127px;
background: url(whoisnm.gif) top left no-repeat;
}