Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

100%-10px?

Status
Not open for further replies.
soniclnd

soniclnd

Technical User
Jan 6, 2005
51
US
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?
 
Sort by date Sort by votes
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:
boxmodelling.gif
 
Upvote 0 Downvote
thanks for the lesson.

try this, then:

Code: 
<div style="width: 100%;">
  <div style="margin-right: 10px; border: 1px solid black;">
    stuff
  </div>
</div>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
From the last test I ran a month or so ago, whether or not borders and padding are included in the width of the box varies from browser. IE and FF do not necessarily agree.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
It is a question of standards rather than browsers. FF and other standards-compliant browsers act in a way to make the code provided by Cory work like the petitioner asked. However, IE5 (and 5.5) completely disregard the standards and impose their belief on how to render boxes. IE6 however has both IE5 behaviour (quirks mode) and standards-compliant behaviour. If you want to shift your IE6 from quirks to standards, include a complete and valid doctype at the top of the document. Cory just assumed you have that, since it is probably the most important founding stone to start building website on.
 
Upvote 0 Downvote
I bold the names of other users to tell the people reading the thread that this was mentioned before in their post but they just:

1. ignored it or;
2. missed it.

I didn't mean to put you down. If you do not want to be bold, you don't have to be. :)
 
Upvote 0 Downvote
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:
divs8ab.gif

thank you....
 
Upvote 0 Downvote
yeah... that works well because all of the widths of the columns are percents... but in what i want to do 2 of the measurements are fixed, while the other one changes.....
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

#green { border: 1px solid green; }

#blue {
    width: 100px;
    float: right;
    border: 1px solid blue;
}

#red {
    width: 250px;
    float: right;
    border: 1px solid red;
}

#clear { clear: both; }

</style>
</head>

<body>

<div id="green">

    <div id="red">red</div>
    <div id="blue">blue blue</div>
    <div id="clear"></div>

</div>

</body>
</html>

and your next question, i predict, is "how can i get the red and blue sections to be the full height of the green section?

and the answer is: either set a static height of the green, and then set the blue and red heights to 100%, or use JAVASCRIPT to do so.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
well, i thought that if i figured out the answer to my first question i could apply it to my layout... but apparently i couldnt... cflava, thanks for trying to help (aparently you are as frustrated with me as i am with css right now...)

but... *tum*tum*tum....
if u look at the picture i did.... green does not contain blue and red, all three of those divs(green, blue and red) are contained within holder..... green is to the left and covers the rest of the space that red and blue didn't cover.... blue is 100px... and red is 250px.... sorry
 
Upvote 0 Downvote
nvm cflava.... i combined everything you told me in your posts and could finally figure it out.... here's what i did
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Soniclnd's Page</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="sonic.ico">
<style type="text/css">

#holder {
border: 1px solid white;
height: 50px;
width: 100%;
}

#blue {
    width: 100px;
    float: right;
    border: 1px solid blue;
    height: 100%;
}

#red {
    width: 250px;
    float: right;
    border: 1px solid red;
    height: 100%;
}
#green {
height: 100%;
border: 1px solid green;
margin-right: 354px;
}

</style>
</head>
<body>

<div id="holder">

    <div id="red">red</div>
    <div id="blue">blue blue</div>
    <div id="green">something</div>

</div>

</body>
</html>
thanx soo much....
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

1DMF
  • Locked
  • Question
IFrame 100% height nightmare 2
Replies
10
Views
299
vacunita
vacunita
kristofdielis
  • Locked
  • Question
CSS - Content div not taking 100%
Replies
3
Views
57
darryncooke
darryncooke
peterpann
  • Locked
  • Question
table stretch to 100% in all browsers
Replies
4
Views
51
peterpann
peterpann
Doc1355
  • Locked
  • Question
DIV 100% height minus header
Replies
7
Views
64
ChrisHirst
ChrisHirst
thompom
  • Locked
  • Question
100% height inner div with sticky footer
Replies
4
Views
69
darryncooke
darryncooke

Part and Inventory Search

Sponsor

Back
Top