/    Sign up×
Community /Pin to ProfileBookmark

css layout

Copy linkTweet thisAlerts:
Oct 19.2007

Using the following css

[CODE]
div#wrapper {width: 70%; margin:0 auto;}
div#header {width: 100%; height: 140px; background: yellow; padding: 0px, 0px, 0px, 0px; float:center;}
div#navigation {width: 20%; background: gray; padding: 0px, 0px, 0px, 0px; float:left;}
div#mainContent {width: 80%; height:auto; background: red; padding: 0px, 0px, 0px, 0px; float:left;}
div#footer {width: 100%; height: 140px; background: black; padding: 0px, 0px, 0px, 0px; float:center;}

[/CODE]

My problem is this:

The navigation section is directly to the left of the main content section.
How can I ensure that the height of the navigation section will ALWAYS match that of the main content section which will be dynamic based on the amount of text in it?

I understand that using auto will stretch the main content section as text is added inside it. However the navigation section will be mainly static thus creating a gap starting underneath the nav section to the end of the main content section.

Can I make sure the naigation section will grow as and when the maincontent section grows?

Hope this makes sense!

John

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriOct 19.2007 — You don't - in the context of [B]content[/B], forcing the container to be larger than it needs to does not make sense. For visuals, faux columns can make it [B][I]look[/I][/B] like the columns are equal.
Copy linkTweet thisAlerts:
@dtm32236Oct 19.2007 — padding: 0px, 0px, 0px, 0px; is wrong syntax...

it should be:

padding: 0px 0px 0px 0px;

but this is the same as:

padding: 0;

and there's no such thing as float:center;

it's either float:left; float:right; or float:none;

i don't know what you're trying to do with float:center; but maybe you want text-align:center;
Copy linkTweet thisAlerts:
@WebJoelOct 19.2007 — Also incorrect syntax is this:
background: red;[/QUOTE] That is "background-color:red;", unless you [I]combine[/I] two or more background attributes into one 'shorthand' declaration, like this:background-image: url([I]image.jpg[/I]);

background-position: left 50%;

background-color:red;[/QUOTE] becomes in 'shorthand':
background:red url([I]image.jpg[/I]) left 50%;[/QUOTE] Note [I]no commas or semi-colons[/I] between the values.

Firefox at least, will not recognize "background:red;"
Copy linkTweet thisAlerts:
@KravvitzOct 20.2007 — Alternatively, you could use a [url=http://www.pmob.co.uk/temp/2column_simple_1.htm]technique like this one[/url].

Firefox at least, will not recognize "background:red;"[/QUOTE]
Huh? It works for me.

Perhaps a bug in Firebug confused you?
Copy linkTweet thisAlerts:
@ray326Oct 20.2007 — I'm sure the simple "background: red;" is ok although I wonder but am too lazy to experiment to see what happens to the other potential attributes would be in for repeated use like.

background: url(myback.gif) norepeat;

background: red;

Oh fooey I'll try it. ---- It totally overrides the preceding background and defaults the rest of the styles.
Copy linkTweet thisAlerts:
@WebJoelOct 21.2007 — I'm sure the simple "background: red;" is ok ...[/QUOTE] It doesn't seem to work on my HTML-editor which uses the IE6 rendering. -I [I]have[/I] seen my HTML-editor behave differently than IE6-[I]proper[/I], however.

This issue has caused me problems in the past so I just automatically now never write it that way. :o

I would like to hear if others either see or [I]do not see[/I] the same thing.. ?

It is like:

[B]div[/B]#wrapper {width: 70%; margin:0 auto;}

perfectly legal to write it that way, but my preferance is to omit the "div" and let the id speak for itself.

-All a matter of preferance really..
×

Success!

Help @john_noble spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...