• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 856
  • Last Modified:

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
<!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;
}

Open in new window

0
Rick_Penney
Asked:
Rick_Penney
1 Solution
 
rbudjCommented:
Here you go, you had your divs in the wrong order. I also renamed selection to selection_two and gave it a clear:both property to line everything up properly.
<!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" />
<style type="text/css">
body, html {
        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 {
 
 
}
#selection_two {
width:760px;
clear:both;
}
 
 
#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;
	
 
		
}
#selectioncenter {
width:260px;
float:right;
 
}
 
</style>
</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_two">
    <div id="selectionleft">Content for  id "selectionleft" Goes Here</div>
   
    <div id="selectionright">Content for  id "selectionright" Goes Here</div>
     <div id="selectioncenter">test</div>
  </div>
  <div id="footer"><img src="" alt="" name="footer" width="760" height="32" id="footer2" /></div>
</div>
</body>
</html>
 
 

Open in new window

0
 
Rick_PenneyAuthor Commented:
Hi, many thanks for replying so quickly, i've added the properties width:760px and clear:both as you have suggested and it all works great. Kindest Regards, Rick
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now