5 replies [Last post]
soniclnd
Offline
Regular
Last seen: 14 years 45 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

hello... i have a div that i want to extend the whole width of the page except the last 10 pixels... is there any way to accomplish this with css?

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 10 years 44 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Re: 100%-10px?

soniclnd wrote:
hello... i have a div that i want to extend the whole width of the page except the last 10 pixels... is there any way to accomplish this with css?

There are a few scenarios to consider here. If you have a fixed width layout, then you'll probably have a wrapper div set to hold all of the content, the meat of the site. In this case, you would specify this rule on the div in question:

#yourdiv { margin-right: 10px; }

This would push #yourdiv 10 pixels away its parent edge. If your layout is a liquid and spans the whole page, you won't know the exact width in pixels, so you could set your margin at the body level.

body { padding: 0; margin-right: 10px; }

Without knowing the kind of layout you've chosen, it's pretty tough to give you a single answer. Hopefully this has given you a slightly better understanding.

Antibland

soniclnd
Offline
Regular
Last seen: 14 years 45 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

100%-10px?

i've tried that, but it doesn't work...... in the box model the padding and margin are outside the measurements of the widht.... so adding a 10px margin wouldn't move it at all... take a look at this diagram:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 37 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

100%-10px?

Don't specify a width. The default behavior for a block level elements is to take all the available width. If you do {margin-right: 10px;}, the element will be 100%-10px wide. That's just The Way Things Work.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

soniclnd
Offline
Regular
Last seen: 14 years 45 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

100%-10px?

thanx for the replies and it really worked like you said... however when i tried to apply it to the layout i'm creating i ran into a lot of issues and couldn't figure it out after an hour of trying... i would really appreciate it if you told me how can i accomplish my layout... here's a pic of wat i want to do:

thank you....

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

100%-10px?

This should do it.

CSS - 
#holder{}
#green {margin-right: 350px}
#red {float:right; width:250px;}
#blue {float:right; width:100px;}

* html #green {height:1%}   /* to get IE into its box model */

HTML -
<div id='holder'>
  <div id='red'> red content</div>
  <div id='blue'>blue content</div>
  <div id='green'> the rest</div>
</div>

If you need holder to wrap around the three divs, then checkout http://www.positioniseverything.net/easyclearing.html

If you want a background to make it look like each column is extending the full length of the longest column, then checkout http://www.alistapart.com/articles/fauxcolumns/