Hi,
I have a div on the left and right both set to 22px and a div in the middle set to 100% and 22px from the left. The problem is it pertrudes out by the 22px the other side lol.
You can see the problem. the white box needs to go inbetween the left and right div exactly, is this the correct way of doing it the code i have so far is
#content {
position: absolute;
left: 22px;
top: 172px;
padding-right: 22px; /*have tried padding and right but nothing */
width: 100%;
background-color:#FFFFFF;
z-index: 100;
}
you can see the problem here : -
<!-- m --><a class="postlink" href="http://www.privatedemo.apc-compunet.co.uk/webdev/vince/new.htm">http://www.privatedemo.apc-compunet.co. ... ce/new.htm</a><!-- m -->
Thanks
Adamwhat about using {margin-right:22px;} ?
are you testing your pages in other browsers than IE? some of the things you're using only work in IE.No, at the moment i am just designing for IE.
I will then test in other browsers.
What issues may i come across when other browsers and margin right doesn't work either
First, you'll want to design in Firefox first. Check it in Opera and Netscape 7.x next, then Safari, then IE-Win. IE-Win hast a TON of CSS rendering bugs.
What you want is exactly what heavenly_blue said. But you can't use a width along with the left and right margin. You'll need to read up on the CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->) and know that IE6-Win gets it wrong unless a proper doctype tag (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) is used at the start of your HTML document. IE5-Win always gets the box model wrong. All other browsers don't have a problem with the box model.
Set the left and right margins to 22px and leave out the width: property all together.
EDIT - One more thing you'll find usefull: Block level elements, like DIV, P, H1, etc, are 100% width by default. Adding borders, padding and margins without specifying a width causes the browser to calculate the width for you. Very handy.Hi, Firstly i am using this doc type, i am just setting firefox as my default browser for designing.
Now i am firstly using this doctype
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
I am also using this css code now and it is still not working : -
#content {
position: absolute;
margin-left: 22px;
top: 172px;
margin-right: 22px;
background-color:#FFFFFF;
z-index: 100;
}
without entering a width the div does not show?
Thanks
AdamAh. Didn't realize the DIV was absolutely positioned. According to the specs, the width and height of absolutely positioned elements is determined by that element's contents (10.6.4 Absolutely positioned, non-replaced elements (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">http://www.w3.org/TR/CSS21/visudet.html ... ced-height</a><!-- m -->) (See items 1 and 3 in the six item list in this section).
What you can do, is set the width of your absolutely positioned element to 100%. Then place another DIV directly inside that which will encapsulate all the other HTML tags in the absolutely positioned DIV. Give the inner DIV a left and right margin of 22px;
#content {
position: absolute;
top: 172px;
background-color:#FFFFFF;
width: 100%;
z-index: 100;
}
#contentBox { margin: 0 22px; }
.
.
.
</style>
</head>
<body>
<div id="content">
<div id="contentBox">
All your other HTML tags go here
</div>
</div>ok that didn't quite work, but your divs and my css does now
Thanks
#content {
position: absolute;
top: 172px;
width: 100%;
z-index: 100;
}
#contentBox {
margin-right: 22px;
margin-left: 22px;
background-color:#FFFFFF;
}
I have a div on the left and right both set to 22px and a div in the middle set to 100% and 22px from the left. The problem is it pertrudes out by the 22px the other side lol.
You can see the problem. the white box needs to go inbetween the left and right div exactly, is this the correct way of doing it the code i have so far is
#content {
position: absolute;
left: 22px;
top: 172px;
padding-right: 22px; /*have tried padding and right but nothing */
width: 100%;
background-color:#FFFFFF;
z-index: 100;
}
you can see the problem here : -
<!-- m --><a class="postlink" href="http://www.privatedemo.apc-compunet.co.uk/webdev/vince/new.htm">http://www.privatedemo.apc-compunet.co. ... ce/new.htm</a><!-- m -->
Thanks
Adamwhat about using {margin-right:22px;} ?
are you testing your pages in other browsers than IE? some of the things you're using only work in IE.No, at the moment i am just designing for IE.
I will then test in other browsers.
What issues may i come across when other browsers and margin right doesn't work either
First, you'll want to design in Firefox first. Check it in Opera and Netscape 7.x next, then Safari, then IE-Win. IE-Win hast a TON of CSS rendering bugs.What you want is exactly what heavenly_blue said. But you can't use a width along with the left and right margin. You'll need to read up on the CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->) and know that IE6-Win gets it wrong unless a proper doctype tag (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) is used at the start of your HTML document. IE5-Win always gets the box model wrong. All other browsers don't have a problem with the box model.
Set the left and right margins to 22px and leave out the width: property all together.
EDIT - One more thing you'll find usefull: Block level elements, like DIV, P, H1, etc, are 100% width by default. Adding borders, padding and margins without specifying a width causes the browser to calculate the width for you. Very handy.Hi, Firstly i am using this doc type, i am just setting firefox as my default browser for designing.
Now i am firstly using this doctype
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
I am also using this css code now and it is still not working : -
#content {
position: absolute;
margin-left: 22px;
top: 172px;
margin-right: 22px;
background-color:#FFFFFF;
z-index: 100;
}
without entering a width the div does not show?
Thanks
AdamAh. Didn't realize the DIV was absolutely positioned. According to the specs, the width and height of absolutely positioned elements is determined by that element's contents (10.6.4 Absolutely positioned, non-replaced elements (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">http://www.w3.org/TR/CSS21/visudet.html ... ced-height</a><!-- m -->) (See items 1 and 3 in the six item list in this section).
What you can do, is set the width of your absolutely positioned element to 100%. Then place another DIV directly inside that which will encapsulate all the other HTML tags in the absolutely positioned DIV. Give the inner DIV a left and right margin of 22px;
#content {
position: absolute;
top: 172px;
background-color:#FFFFFF;
width: 100%;
z-index: 100;
}
#contentBox { margin: 0 22px; }
.
.
.
</style>
</head>
<body>
<div id="content">
<div id="contentBox">
All your other HTML tags go here
</div>
</div>ok that didn't quite work, but your divs and my css does now
Thanks
#content {
position: absolute;
top: 172px;
width: 100%;
z-index: 100;
}
#contentBox {
margin-right: 22px;
margin-left: 22px;
background-color:#FFFFFF;
}