6 replies [Last post]
slippers
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Joined: 2005-03-16
Posts: 57
Points: 0

I want to have a div 100% the screen width, float an image right and have a left padding of 35px.

But padding 35px makes the div go more than 100% (100% + 35px) introducing a horizontal scroll bar.

Is there a way to keep the div 100% but have a 35px left pad?

slippers
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Joined: 2005-03-16
Posts: 57
Points: 0

100% width with padding

edit: cock up post, please continue to read below

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

100% width with padding

It may be that adding padding to the container isn't the best option. If you show us a link or describe what you're doing in more detail, a better option might be suggested.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

slippers
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Joined: 2005-03-16
Posts: 57
Points: 0

100% width with padding

I could place all content within the div into say a <p> tag and put a 3ppx left margin on that relative to the div, but I'd hoped there was a better solution.

So basically I have

<div id='content'>
<img height='450'>
my content here
</div>

#content {position: relative; width: 100%; padding: 25px 0px 0px 0px}

Now if I change the padding to be padding: 25px 0px 0px 35px

the div goes off the right hand side bringing the scrollbar, which obviously is not acceptable.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

100% width with padding

Why do you need to specify width: 100%? It should occupy whatever space remains for it (after padding & margins are deducted).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

slippers
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Joined: 2005-03-16
Posts: 57
Points: 0

100% width with padding

omg you muppet Laughing out loud Shock Laughing out loud

That didn't even occur to me at all, so angry with myself for that error. Crying

While I'm here though something else I noticed, I specify a width for my h1 tag (need to becaue of the background image) of 400px, my right floating image is 150px wide, if I resize the screen to say less than 800x600, the h1 and all of the content moves below the floating image, but in FF the h1 tag goes over the top of the image and the rest of the text wraps.

Is there a way to make IE do this too?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

100% width with padding

Can you show us the code?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference