Rick_Penney
asked on
rectify a new div tag that is floating incorrectly
Hi
i have created several div tags and the corresponding css id's and am having a problem with creating a final tag that will house 3 individual div tags. the problem tag is the #selection tag.
i initially created 3 tags to live inside the #selection tag and i was going to float one to the left, one to the right, and one in the centre which i've found float:centre doesnt exist.
the problem i have at the moment is that #selectionright which has a float:right rule is floating to the point of the div element above it.
i have included the html and css to make it easier to see what i'm rambling on about.
i would like to have #selectionright float to the right of the #wrapper.
i would like to have 3 seperate divisions within the #selection tag to display 3 linkable images.
i could do this with 3 images inside the #selection tag, but i want to learn how to add 3 seperate tags inside the #selection tag and then put an image in each div tag.
regards
Rick Penney
i have created several div tags and the corresponding css id's and am having a problem with creating a final tag that will house 3 individual div tags. the problem tag is the #selection tag.
i initially created 3 tags to live inside the #selection tag and i was going to float one to the left, one to the right, and one in the centre which i've found float:centre doesnt exist.
the problem i have at the moment is that #selectionright which has a float:right rule is floating to the point of the div element above it.
i have included the html and css to make it easier to see what i'm rambling on about.
i would like to have #selectionright float to the right of the #wrapper.
i would like to have 3 seperate divisions within the #selection tag to display 3 linkable images.
i could do this with 3 images inside the #selection tag, but i want to learn how to add 3 seperate tags inside the #selection tag and then put an image in each div tag.
regards
Rick Penney
<!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>Vines Rentals - Home Page.</title>
<link href="css/rentals.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="" alt="" name="logo" width="250" height="70" id="logo2" /></div>
<div id="navigation"><img src="" alt="" name="navigation" width="500" height="70" id="navigation2" /></div>
</div>
<div id="content">
<div id="leftcolumn"><img src="" name="video" width="550" height="400" id="video" /></div>
<div id="rightcolumn"><img src="" name="sidebar" width="190" height="400" id="sidebar" /> </div>
</div>
<div id="selection">
<div id="selectionleft">Content for id "selectionleft" Goes Here</div>
<div id="selectionright">Content for id "selectionright" Goes Here</div>
</div>
<div id="footer"><img src="" alt="" name="footer" width="760" height="32" id="footer2" /></div>
</div>
</body>
</html>
body {
background-color: #FFF;
text-align: left;
margin: 0px;
padding: 0px;
}
#wrapper {
text-align: left;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin-top: 12px;
margin-bottom: 75px;
}
#leftcolumn {
float: left;
width: 550px;
}
#selectionleft {
width: 250px;
float: left;
}
#selection {
}
#rightcolumn {
float: right;
width: 190px;
margin-bottom: 20px;
}
#logo {
float: left;
width: 250px;
}
#navigation {
float: right;
width: 500px;
}
#content {
margin-top: 0px;
padding-top: 0px;
}
#footer {
margin-bottom: 12px;
clear: both;
}
#selectionright {
width: 250px;
float: right;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER