3 replies [Last post]
EscArtist
Offline
newbie
Last seen: 12 years 34 weeks ago
Joined: 2008-02-28
Posts: 2
Points: 0

I am in the process of learning css/xhtml and i ran into some problems with padding 3 column page layout. the problem is with the last (rightmost) column

here's the code

XHTML











Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.


MAIN.CSS

html, body {
margin: 0px 0px 0px 0px;
padding: 0px;
background: grey;
}

#main-nav {
background: red;
height: 100px;
}

#header {
background: blue;
height: 200px;
}

.hidden {
display: none;
}

#container {
width: 780px;
margin: auto;
background: none;
}

#footer {
clear: both;
padding: 0px 0px 0px 0px;
text-align: center;
background: orange;
height: 20px;
}

h1 {
margin: 0;
padding: 0;
}

INDEX.CSS

#sidebar1, #sidebar2, sidebar3 {
float: left;
width: 260px;
padding: 10px 0px 0px 0px;
}

#sidebar1 {
background: green;
}

#sidebar2 {
background: darkorange;
}

#sidebar3 {
background: yellow;
}

the padding doesn't apply to the third column in FF or IE

DigitalWanderer
DigitalWanderer's picture
Offline
newbie
Stockholm, Sweden
Last seen: 12 years 33 weeks ago
Stockholm, Sweden
Timezone: GMT+1
Joined: 2008-01-11
Posts: 2
Points: 0

And this is simply not

And this is simply not because your CSS is missing a # in front of sidebar3 in the first segment of index.css?

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 9 years 5 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

ha, wow. Good eye. That

ha, wow. Good eye. That would do it... Let's see what he says.

mattrossidesigns.com

EscArtist
Offline
newbie
Last seen: 12 years 34 weeks ago
Joined: 2008-02-28
Posts: 2
Points: 0

DigitalWanderer wrote:And

DigitalWanderer wrote:
And this is simply not because your CSS is missing a # in front of sidebar3 in the first segment of index.css?

that was it. thanks a lot. i'll have to get used to these little things. thanks again.