Really basic CSS question... 1

[Geee]

I have a page that consists of a menu at the top of the page, a nav to the left and then content to the right like this:

----------------------------
|        Menu              |
----------------------------
------  --------------------
|    |  |                  |
| N  |  |   CONTENT        |
| A  |  |                  |
| V  |  |                  |
|    |  |                  | 
------  --------------------

Basically I can get the top nav and the left nav fine but I have no idea how to get the content box to start at the same horizontal position as the nav but 250px to the right.

Any advice greatly appreciated!

-Geeeeeeeeeeeeeeeeeeeeeeee-

 

[ChrisHunt]

If you Google for "CSS Layout" you should find plenty of resources to help you. Generally you'd use floats: get div#nav to float left, and give div#content a margin-left of 250px.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Geee]

I don't want you thinking that I've not google'd for the answer, and I haven't come straight on here without trying to find the answer myself! Due to a combination of time constraints and lack of understanding I simply couldn't get the content div to float in the right place. I think it's my lack of understanding of the "position" css element that is holding me back here.

-Geeeeeeeeeeeeeeeeeeeeeeee-

 

[1DMF]

what have you got so far? do you have a test URL or can you post the HTML/CSS code.

we can't really help without having something to go on.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

You don't need to use position.

Just float the nav element to the left.

Make sure that if you have set widths on the nav and content elements that there is enough room for them.
You may need to look at how different browsers handle the 'box model' to understand what is going on.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Geee]

This is what I have so far:

CSS:

#tree {
	width: 300px;
	background:#CCCCCC;
	border: thin dotted #666666;
	padding:5px;
	float:left;
	margin: 5px;
}

#top-menu {
	font: 22px tahoma,verdana,sans-serif; 
	color:#555;
	background:#CCCCCC;
	border: thin solid #000000;
	padding:10px;
	width:100%;
	text-align:center;
	margin:0px;
}

#top-menu:hover {
	background:#AAAAAA;
	cursor:pointer;
}

hr {
	color:#999999;
}

#results {
	float:left;
	background:#CCCCCC;
	border: thin dotted #666666;
	padding:5px;
	margin:5px;
	width: 100%;
}

HTML:

<link href="example.css" rel="stylesheet" type="text/css" />

<div id="top-menu">
TOP MENU
</div>

<hr class="rule" />

<div id="tree" oncontextmenu="return false"  >
Nav Area
</div>

<div id="results" style="display:block">
Results Area
</div>

http://www.whosh.co.uk/example

I'm nearly there because if I set the width of #result to a fixed width it renders correctly!

Thanks in advance once again.

G

-Geeeeeeeeeeeeeeeeeeeeeeee-

 

[1DMF]

AFAIK if you make something 100% wide it is 100% of the screen resolution, which is the effect you are getting.

If you want something to be fluid and not fixed width then you need to use percentages instead.

You are also setting a width to 100% and using margin 5px, which is why you are getting the bottom scroll bar,

100% wide + 5px margin > 100% wide!

to get your desired effect with a fluid design you need to use...

#tree {
    width: 28%;
    background:#CCCCCC;
    border: thin dotted #666666;
    padding:5px;
    float:left;
    margin: 5px;
}

#top-menu {
    font: 22px tahoma,verdana,sans-serif; 
    color:#555;
    background:#CCCCCC;
    border: thin solid #000000;
    padding:10px;
    width:100%;
    text-align:center;
    margin:0px;
}

#top-menu:hover {
    background:#AAAAAA;
    cursor:pointer;
}

hr {
    color:#999999;
}

#results {
    float:left;
    background:#CCCCCC;
    border: thin dotted #666666;
    padding:5px;
    margin:5px;
    width: 70%;
}

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

A few pointers.

1. Your top menu falls out of the page, because it is 100% wide + it has 10px padding on each side. That is 100% + 10px, which is more than the entire browser window. Since div will by default expand to fill all available horizontal area, you can get rid of the 100% width for better results.

2. Similar holds true for the second pair. If #tree is 300px and you want #results next to it, you need to make it's width something less than 100%. It is impossible to calculate how much 100% - 300px is, so what you do is again use the fact that divs expand to fill the horizontal space. Adding margin-left: 300px (or more if you want some gap between the two) will allow the #result div to appear next to #tree and make sure it occupies whatever remaining space is there, except for the 300px on the left.

 

[1DMF]

use the fact that divs expand to fill the horizontal space.

well that's what i thought but if you remove the 100% from the results div it only expands to the width of the content NOT the rest of available space!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Geee]

True. I'm getting there but I cannot get the div to expand to the rest of the available space. Some good pointers however and thank you to everyone who replied.

-Geeeeeeeeeeeeeeeeeeeeeeee-

 

[Vragabond]

You do not want to float #results. Floating changes the behaviour of the block level element (such as div) and makes its default width auto (just enough to fit the content) instead of all available space.

 

[1DMF]

aha got ya, float:left; nav with fixed width, don't float results with left-margin width of nav + padding if gap wanted, your so clever!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.