We help IT Professionals succeed at work.

rectify a new div tag that is floating incorrectly

Medium Priority
879 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

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
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.