Back to General and Gameplay Programming

[web] CSS div positioning problem

General and Gameplay Programming Programming

Started by deadlydog September 07, 2006 05:54 PM

10 comments, last by deadlydog 17 years, 7 months ago

deadlydog

170

Author

September 07, 2006 05:54 PM

OK, I am using CSS and in it I have defined:


#DirectoryMenu
{
	position:absolute; top:0.25em;
	max-width:16em;
	border-style:double;
	padding-bottom:0.5em; padding-left:0.5em; padding-right:0.5em; padding-top:0.5em;
	background-color:#FFCC99;
}

#Content
{
	position:absolute; left:18em; top:0.25em;
}

Then in the body of my webpage I have


<body>
<div id="DirectoryMenu">
....a bunch of code....
</div>

<div id="Content">
.....a bunch of code.....
</div>
</body>

This works OK for now, but what I want to do is have the DirectoryMenu (whose width will dynamically adjust depending on the length of what is displayed in it)on the top left, and the Content beside it, running from the right side of the DirectoryMenu to the right side of the window. Currently I have set the Content section to an absolute left position because I can not figure out how to have it "float" over to the right side of the Directory Menu. I have tried adding "float:left;" to the Content, but then it floats over top of the DirectoryMenu, and if I try using relative positioning instead of absolute, then the Content appears underneith the DirectoryMenu. To see what it currently looks like go here. Any help would be appreciated. Thanks.

-Dan- Can't never could do anything | DansKingdom.com | Dynamic Particle System Framework for XNA

PhilMorton

100

September 07, 2006 09:40 PM

Dont position either of them using absolute.
Make both of them float:left. And make the content div clear:right.

Allways question authority......unless you're on GameDev.net, then it will hurt your rating very badly so just shut the fuck up.

deadlydog

170

Author

September 07, 2006 11:27 PM

Quote:Original post by PhilMorton
Dont position either of them using absolute.
Make both of them float:left. And make the content div clear:right.

I tried this but the Content section appeared below the DirectoryMenu, not beside it. I should mention that in my DirectoryMenu and Content sections there are breaks (br /); it is not one big object like a table or something. Does anyone else have any ideas? Thanks

-Dan- Can't never could do anything | DansKingdom.com | Dynamic Particle System Framework for XNA

deadlydog

170

Author

September 10, 2006 07:41 PM

I'm still having this problem if anybody has a potential solution for me. Thanks.

-Dan- Can't never could do anything | DansKingdom.com | Dynamic Particle System Framework for XNA

PhilMorton

100

September 10, 2006 07:46 PM

hmm, you could give this tutorial a go;
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Or search for "two column layout div css" to find other tutorials on google...

Allways question authority......unless you're on GameDev.net, then it will hurt your rating very badly so just shut the fuck up.

Sander

1,332

September 11, 2006 01:09 AM

Try Two Column Layouts on css-discuss.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Verminox

166

September 11, 2006 02:35 AM

Something really basic would be:

&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;#menu {	float: left;	width: 20%;	border: 0.1em solid #000;	padding: 0.5em;}#content {	float: right;	width: 70%;	border: 0.1em solid #000;	padding: 0.5em;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="menu"&gt;  <ul>   <li>Item 1</li>   <li>Item 2</li> </ul></div>&lt;div id="content"&gt;<p>My Content</p><p>And other stuff like that</p></div>&lt;/body&gt;&lt;/html&gt;

If you want to include somthing like a footer box below both of them, just put another div below them with the style clear: all and it should stretch across the page.

--------------------------------------Amaze your friends! Astound your family! Kennify your text!

deadlydog

170

Author

September 11, 2006 01:02 PM

Awesome, thanks for the tutorials. They helped alot, but I am still having some trouble. I now have 4 div sections: Heading, DirectoryMenu, Pictures (content), and Container which holds all of the other divs. Here is how I have them defined now:

/* Background properties */body{	padding:0;	margin:0;	background-color:#FFFFFF;	color:#000000;}/* Everything is contained within this div */#Container{	width:100%;	margin:0 auto;}/* Heading properties */#Heading{	border-style:solid; border-color:#000000; border-width:thin;	background-color:#FFFFCC;	margin:0.25em;	font-weight:bold;	text-align:center;	color:#0000CC;	clear:both;}/* Directory Menu properties */#DirectoryMenu{	float:left;	max-width:35%;	border-style:double;	background-color:#CCCCCC;	padding:0.25em;	margin:0.25em;}/* Pictures section properties */#Pictures{	margin:0.25em;	padding:0.25em;}

and this is the format they are defined:

<div id="Container">   <div id="Heading">....</div>   <div id="DirectoryMenu">....</div>   <div id="Pictures">....</div></div>

Problem 1 - The Pictures section contains 2 tables; 1 for the Pictures, and another for the Pages (i.e. if there are 100 pictures and you are showing 10 pictures per page, you will need 10 pages). I want the Pictures section to extend to the right edge of the screen (i.e. the right edge of the Container div) so that the tables extend from the left edge of the DirectoryMenu to the right edge of the screen. I have tried making the tables widths 100%, but then it makes the tables width the size of the screen width, so it extends past the right edge of the screen quite a bit. If I don't specify a width in the tables (as it currently is) then the tables only extend as much is needed to display their content. How could I get the tables to extend to the right edge of the screen?

Problem 2 - The Pictures section does not remain a rectangle. That is, if the Pictures section extends past the DirectoryMenu section, then the Pictures section moves over to the left edge of the screen. Is there any way I could specify it not to do this?

To see the page as it currently is go here. Scroll all the way to the bottom to see Problem 2.

Any more help would be very appreciated. Thanks

-Dan- Can't never could do anything | DansKingdom.com | Dynamic Particle System Framework for XNA

Sander

1,332

September 11, 2006 03:25 PM

Instead of floating the directory menu left, you could float the pictures section right. That will solve #1 (because 100% table width will be picture container width) and #2.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

deadlydog

170

Author

September 11, 2006 03:59 PM

Quote:Original post by Sander
Instead of floating the directory menu left, you could float the pictures section right. That will solve #1 (because 100% table width will be picture container width) and #2.

I tried this and it seemed to correct the width problem, but it also pushed the Pictures section down underneith the DirectoryMenu section. How could I fix this problem so it stays beside the DirectoryMenu, not under it? Thanks

-Dan- Can't never could do anything | DansKingdom.com | Dynamic Particle System Framework for XNA

[web] CSS div positioning problem

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

[web] CSS div positioning problem

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines