Dizzay Posted October 2, 2011 Share Posted October 2, 2011 I have a very simple web page composed of 3 <div> elements. I'm having a great deal of difficulty getting them where I want them. Basically I want the content div of the page to "float" into the bottom right corner of the page. However, since <div> can only be floated left or right, I cant use the float property. So how do I get it into the bottom right corner? Link to comment Share on other sites More sharing options...
Ingolme Posted October 2, 2011 Share Posted October 2, 2011 Could you show an image of what you mean? If the content is vertically flexible, you can't get it to stick to the bottom. Imagine that the content is taller than the window is,if it's stuck to the bottom then what happens to the part of it that goes outside the top of the window? Link to comment Share on other sites More sharing options...
Dizzay Posted October 2, 2011 Author Share Posted October 2, 2011 Could you show an image of what you mean? If the content is vertically flexible, you can't get it to stick to the bottom. Imagine that the content is taller than the window is,if it's stuck to the bottom then what happens to the part of it that goes outside the top of the window? This is the html: <html><head> <style type="text/css">body{background-color:#1a1a1a;background-image:url("gradient.php");background-repeat:repeat-x;}img.mainlogo{padding:5px}#header{background-color:;border-radius: 2px;height:32px;width:1335px;}a:link{font-family:Arial,Verdana,sans-serif;font-size:12px;padding:8px}a:link {color:#FF0000;} a:visited {color:#000000;}a:hover {color:#FF0033;} a:active {color:#0000FF;} </style></head> <body> <div id="header"> <img border="0" src="thiswillbethelogo" width="100" height="20" class="mainlogo"><a class="link" style="float:right; text-decoration:none;"href="http://www.funnyjunk.com">Login</a><a class="link" style="float:right; text-decoration:none;"href="http://www.funnyjunk.com">Login</a><a class="link" style="float:right; text-decoration:none;"href="http://www.funnyjunk.com">Login</a><a class="link" style="float:right; text-decoration:none;"href="http://www.funnyjunk.com">Login</a><a class="link" style="float:right; text-decoration:none;"href="http://www.funnyjunk.com">Login</a></div> <div id="menu" style="background-color:#FFD700;height:5000px;width:100px;float:left;border-radius: 7px;"></div> <div id="content" style="background-color:#eeeeee;height:4000px;width:1233px;float:right;border-radius: 7px;"> <div id="innercontent style="background-color:#ff0000;height:50px;width:50px"</div> </body></html> I know its terrible but i've just started. Basically I want the grey content box and the yellow menu to be a little lower, so all of the purple gradient can be seen Link to comment Share on other sites More sharing options...
Don E Posted October 2, 2011 Share Posted October 2, 2011 Just to note: It is considered good practice to keep your CSS separate from your HTML. In other words, try not to use the style attribute to style certain HTML elements. You gave the div id's where you can access those elements and style them that way instead; like how you did #header. <div id="innercontent style="background-color:#ff0000;height:50px;width:50px"</div> The above, looks like you forgot the end quote for "innercontent", and the >(greater than sign) after 50px" Looks like you're also missing the closing </div> for div id="content" as well. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.