4 replies [Last post]
miu
Offline
newbie
BC
Last seen: 15 years 3 weeks ago
BC
Joined: 2007-07-10
Posts: 5
Points: 0

hi guys!
I am a newbie both in this forum and css Smile

I am trying to make 3 column and I want to be hybird (elastic & liquid)
and since this is only my own personal exercises to get better with CSS.
my goal is to make similar layout with this guy website http://www.studiomikmik.co.uk/work/area.htm

The problem that I am having right now is I couldn't get it how I can calculate the right size for both main navigation column, my wrapper, and my main content column?
plus, if you guys see it there is a big gap between my main navigation with the content? how I can fix it?

Other than that, that guy website have other 3 columns on the header. How I can achieve that too?

Three Col Hybrid Layout

/* Zero down margin and paddin on all elements */

* {
margin: 0;
padding: 0;
}

body {
font-family: "Verdana", sans-serif;
line-height: 1.6;
background-color:#ffffff;
}

h1 {
font-size: 2.2em;
font-weight: normal;
}

h2 {
font-size: 2.0em;
font-weight: normal;
}

p, li {
font-size: 1.4em;
}

h1, h2, p {
margin: 1em 0;
}

#wrapper {
background-color: #fffffff;
}

#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}

#branding h1 {
margin: 0;
}

#mainNav {
list-style: none;
background-color:#eee;
}

#secondaryContent {
background-color:#ffffff;
}

#secondaryContent h2 {
font-size: 1.6em;
margin: 0;
}

#secondaryContent p {
font-size: 1.2em;
}

#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}

/* The Core Div
================================= */

body {
font-size: 62.5%;
text-align: center;
}

#wrapper {
width: 75em;
max-width: 100%;
margin: 0 auto;
text-align: left;
}

#mainNav {
width: 13em;
max-width: 31%;
float: left;
border-style:solid;
border-width:1px;
}

#content {
width: 60em;
max-width: 75%;
float: right;
border-style:solid;
border-width:1px;
}

#mainContent {
width: 18em;
max-width: 31%;
float: left;
border-style:solid;
border-width:1px;
}

#secondaryContent {
width: 38em;
max-width: 80%;
float: right;
border-style:solid;
border-width:1px;
}

#footer {
clear: both;
}

/* padding
================================== */

#mainNav,#mainContent, #secondaryContent {
padding-top: 10px;
padding-bottom: 10px;
}

#mainNav *,#mainContent * {
padding-left: 10px;
padding-right: 10px;
}

#mainNav * *, #mainContent * * {
padding-left: 0;
padding-right: 0;
}

-->

Branding

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Magna aliquam erat volutpat

Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

thanks so much guys (i have been stuck for the past 3 hours)

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 12 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

HELLO miu

:rolleyes: :rolleyes: :rolleyes:
while seperating the 3 column layout in div U should have to code the css systematically so that we could modify what ever we like so I modify little bit your code and the layout of your page check out if is it solve your problem.

Three Col Hybrid Layout

{ margin: 0; padding: 0;}
body { font-family: "Verdana", sans-serif; line-height: 1.6; background-color:#ffffff;font-size: 62.5%; text-align: center;}
h1 { font-size: 2.2em; font-weight: normal;}
h2 { font-size: 2.0em; font-weight: normal;}
p, li { font-size: 1.4em;}

#wrapper { background-color: #fffffff;}
#branding { height: 50px; background-color:#b0b0b0; }
#branding h1 { margin: 0;}

#wrapper { width: 778px; margin: 0 auto; text-align: left;display:block;}
#mainNav { width: 180px; float: left; border-style:solid; border-width:0px;display:block;}
#content { width: 593px; float: right; border-style:solid; border-width:0px; display:block;}
#mainContent { width: 18em; float: left; border-style:solid; border-width:0px;display:block;margin-left:8px;background:#F5F3F0;padding-left:3px;}
#secondaryContent {background-color:#ffffff; width: 38em; float: right; border-style:solid; border-width:0px;display:block;background:#F5F3F0;padding-left:3px;}
#mainNav,#content{padding-top:10px;padding-bottom:10px;}

#footer { display:block;background-color:#b0b0b0; padding: 1px 20px;clear:both;height:100%;overflow:auto;}

Branding


Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Magna aliquam erat volutpat

Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.











Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 12 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

I Forgot to correct your link sorry

:bigoops:
:bigoops:
I Forgot to correct your lef tnavigator link sorry

miu
Offline
newbie
BC
Last seen: 15 years 3 weeks ago
BC
Joined: 2007-07-10
Posts: 5
Points: 0

thanks anyway! but still

thanks anyway! but still yeah even me, I am still confused how to fix the navigation plus the footer Sad

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 12 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Dear Frens

:rolleyes: :rolleyes:
I think my code fix your problem about navigator and footer both .