Jump to content

Div Horizontal Problem


nidhikandan
 Share

Recommended Posts

Hi,help me........How is create horizontal DIV with use in CSS, im create one but second div just problem., thats div in not put into text.<!--#container { width:80%; border:1px solid #FF9900; float:left;}#navone { width:33%; float:left; position:relative; background-color:#FF6633; }#navthree { width:33%; float:right; position:relative; background-color:#FFCC33; }#navtwo { width:33%; float:right; position:relative; background-color:#FFFF99; }--></style></head><body><div id="container"> <div id="navone">Left</div> <div id="navtwo">Right</div> <dvi id="navthree">centre</div></div></body></html>

Link to comment
Share on other sites

What do you mean? I don't quite understand your problem.
Horizontal alignment in CSS, i make it one, thats correct see in browser ,but i can't not put it text in navthree (in Dreamweaver)..pls see..pls open this file in Dreamweaver.<!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>Untitled Document</title><style type="text/css"><!--#container { width:80%; height:20px; border:1px solid #FF9900; float:left; margin: 15px 0 15px 10px;}#navone { width:34%; float:left; position:relative; background-color:#FF6633; }#navthree { width:33%; float:right; position:relative; background-color:#FFCC33; }#navtwo { width:33%; float:right; position:relative; background-color:#FFFF99; }--></style></head><body><div id="container"> <div id="navone">Left</div> <div id="navtwo">Right</div> <dvi id="navthree">centre</div></div></body></html>
Link to comment
Share on other sites

I can see navone being on the left edge, but wouldn't navthree be on the right edge due to it being the first "right" object? Navtwo would be in the center as it is to the right of the right object. Any reason not to make them all float left and stack them one, two, three?You might want to change the widths - try making them all 20% to fit in the 80% container with all that margins. Just a suggestion.HTH

Link to comment
Share on other sites

#container { width:80%; height:20px; border:1px solid #FF9900;margin: 0 auto;  }#navone { width:33%; float:left; background-color:#FF6633; }#navthree { width:33%;background-color:#FFCC33; }#navtwo { width:33%; float:right; background-color:#FFFF99; }

Try that. The navthree should fill the available space in the middle.Your sequencing is good. The first item to the left, the second will go right and the third should fill between them. http://mlafever.jlhaslip.trap17.com/index.html check the turtle images at the top.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...