PDA

View Full Version : Problems with floating a div


Cliff
09-21-2010, 08:11 PM
Hello, I bought CS3 when it first came out but I am just now getting into it. I am currently trying to build a website and I am having problems using the float property. I can't seem to get four images to line up horizontally. Everything looks right in the code but the display is still vertical not horizontal. Any help would be appreciated. I am trying to get Divs titled "Irish Landscapes, American Landscapes, Portraits, and Promotional Work" to all line up horizontally. Here's the code.

<!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=UTF-8" />
<title>Gerry Carry Paintings</title>
<style type="text/css">
<!--
body,td,th {
font-size: medium;
}
body {
background-color: #7d7d7d;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
width: 959px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFE6;
border-top-color: #ECEAE0;
border-right-color: #ECEAE0;
border-bottom-color: #ECEAE0;
border-left-color: #ECEAE0;
border-bottom-width: 5px;
border-bottom-style: solid;
}
#container #Top {
margin: 0px;
padding: 0px;
clear: right;
}
#Main {
background-color: #FFFFE6;
border-right-width: 4px;
border-left-width: 5px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #ECEAE0;
border-right-color: #ECEAE0;
border-bottom-color: #ECEAE0;
border-left-color: #ECEAE0;
border-top-width: 0px;
margin: 0px;
padding: 0px;
}
#Test {
background-color: #FFFFE6;
padding-left: 19px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #ECEAE0;
border-right-color: #ECEAE0;
border-bottom-color: #ECEAE0;
border-left-color: #ECEAE0;
border-right-width: 4px;
border-left-width: 5px;
width: 931px;
}
#Test2 {
padding-left: 19px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #ECEAE0;
float: left;
}
#Nav {
background-color: #FFFFE6;
border-right-width: 4px;
border-right-style: solid;
border-right-color: #ECEAE0;
text-align: center;
}
#Large Paintings {
clear: both;
}
#Nav ul {
margin: 0px;
padding: 0px;
}
#Nav li {
display: inline;
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
}
#Irish Landscapes Small {
float: left;
}
#American Landscapes Small {
float: left;
}
#Portraits Small {
float: left;
}
#Promotional Work Small {
float: left;
}
-->
</style>
</head>

<body>
<div id="container">

<div id="Top"><img src="images/Header-Slice.gif" alt="Gerry Carry Paintings" width="959" height="107" /></div>


<div id="Test2"><img src="images/Gerry-Carry---Original-Paintings.gif" alt="test2" width="354" height="24" /></div>

<div id="Nav">
<ul>
<li>Home</li>
<li>Irish</li>
<li>Portraits</li>
<li>American</li>
<li>Promotional</li>
<li>Bio</li>
<li>Contact</li>
</ul>
</div>

<div id="Main">


<div id="Large Paintings"><img src="images/images/Spirit-Rock-cut.jpg" alt="Spirit Rock Large" width="950" height="455" /></div>

<div id="Irish Landscapes Small"><img src="images/images/Irish-Landscapes.jpg" alt="Irish Landscape small" width="190" height="99" /></div>

<div id="American Landscapes Small"><img src="images/images/American-Landscapes.jpg" alt="American Landscapes Small" width="190" height="99" /></div>

<div id="Portraits Small"><img src="images/images/Portraits.jpg" alt="Protraits Small" width="190" height="93" /></div>

<div id="Promotional Work Small"><img src="images/images/Promotional-work.jpg" alt="Promotional Work Small" width="190" height="93" /></div>
Content for id "Main" Goes Here</div>
</div>
<!--close of container div -->
</body>
</html>

gentleone
09-21-2010, 08:30 PM
You'll have to add the widths in the CSS as well otherwise they will be 100% the width of the container (div) they're placed in and thus stack up like in a normal flow.

I combined the 4 divs in the CSS cause they have the same width.

And a big tip! Don't use spaces in ID and class names. separate the words with an underscore or dash.


#Irish Landscapes Small, #American Landscapes Small, #Portraits Small, #Promotional Work Small {
width: 190px;
float: left;
}
Also you use to many divs while they're not necessary, but that's for later ;)

Cliff
09-21-2010, 08:38 PM
Thanks for relpying so quick, I've been trying to figure this out for hours. Can I just go back and change the names in the code so they don't have any spaces or should I just start from scratch.

Cliff
09-21-2010, 08:40 PM
So you always have to specify how big the div should be, it doesn't just pick up on what size the image is that is inside the div?

gentleone
09-21-2010, 09:04 PM
Can I just go back and change the names in the code so they don't have any spaces or should I just start from scratch.

Looking at your code I would start from scratch.... just kidding :)
I guess what ever you find handy.

So you always have to specify how big the div should be, it doesn't just pick up on what size the image is that is inside the div?

Yes, unless you have a div that has to fill the whole width of the container..