width problem with div

@SalamFeb 28.2003

Hi,

Problem description: top div is not taking the whole width of the window but something smaller than that.

Playing with the code and searching for info, I think that I was able to understand what the problem is but could not figure out a fix.

Take a look at the first two lines (body and top). the width percentage used in “top” is based on the width of the parent object. I think the parent object of the top section is the body. because of using left and right margins for the body, the body width is smaller than that of the window.

I need a different way to specify the width of top or be able to do somehing like width=100% + 185px !!!!

Thanks,
Sam

—– code: just take a look at the first two lines —–

body {margin-right: 85px; margin-left: 100px; margin-top: 130px}
#top {position: absolute; top: 0px; left: 0px; height: 130px; width: 100%}
#nav {position: absolute; top: 140px; right: 0px; width: 85px}
#lef {position: absolute; top: 140px; left: 0px; width: 100px}
#footer {position: relative; top: 0%; left: 0%; width: 100%}

(and in the body section)

rest of code

to post a comment

HTML

4 Comments(s) _↴

@jpmoriartyFeb 28.2003 — #my guess would be that you're going to have to put in another section (call it main maybe) and then put the majority of your code in there. Then you can have your "top" at the right width, and just have to put in an extra div for the main text.

Sounds like the easiest and quickest way round it to me...

<i>
 </i>body {margin: 0px}
 .main {position: absolute; margin: 130px 85px 0px 100px} 
 .top {position: absolute; top: 0px; left: 0px; height: 130px; width: 100%} 
 .nav {position: absolute; top: 140px; right: 0px; width: 85px} 
 .left {position: absolute; top: 140px; left: 0px; width: 100px} 
 .footer {position: relative; top: 0%; left: 0%; width: 100%} 
 
 &lt;body&gt; 
 &lt;div class="main"&gt;
 &lt;!-- Main contents of page --&gt; 
 &lt;/div&gt;
 &lt;div class="top" align=center&gt; 
 &lt;!-- header contents --&gt; 
 &lt;/div&gt;

@SalamauthorFeb 28.2003 — #Thanks jpmoriarty and Dave.

The expression works well if I subtract 24 pixels like this:

width: expression(document.body.offsetWidth-24)

Things will perfectly fit even if the window is resized or screen resolution is changed. Without subtracting the 24 pixles there will always be a horisantal scroll bar for 24 pixles. Sure I have no clue why there was a need to subtract the 24 pixles but with that it works well (I only tested on my computer).

Regarding the main idea I tried it but continude to have some problems that I will try to resolve later today.

I am very sleepy and going to sleep

Thanks again,

Salam

@SalamauthorMar 26.2003 — #Hi Dave or who ever may know the answer,

Do you know of a formula to calculate the hight of the contents of a division kind of similar to the formula you gave me earlier in this thread:

width: expression(document.body.offsetWidth)

The reason why I need it is that the default height of a division matches the height of its contents unless if the height is set. Background color of the division applies to the height of the division. I have a left and right divisoins and I like thier background colors to be of the same height. If I can calculate the heights of thier contents then I can set the height of the shorter one to match the height of the other and thus the background colors of both will cover the same hight.

If I receive no answer I will open a new thread for the question.

Thanks

Salam

@nkaisareMar 26.2003 — #What do you mean by "top div is not taking the whole width of the window"? width: 100% will make it take the entire width.

Regarding your second question: you want left and right cols to span the entire height of the main contents, right? Well, actually, they won't. But you can create that effect.

Have one gif:

****==============

where **** is bgcolor of left, and ==== of main contents.

Have another gif to have background color of right col, width or the right col and any height (5px, maybe)

body {margin-top: 130px; background: url('rightbg.gif') repeat-y top right} /* This will give background to the right col */

#top {position: absolute; top: 0px; left: 0px; height: 130px; width: 100%} /* Positioning the top box (nothing changes) */

#nav {position: absolute; top: 140px; right: 0px; width: 85px} /* Positioning the right col */

#mainboth {margin-right: 85px; background: url('left_and_mainbg.gif') repeat-y top right;} /* This will contain both main and left contents */

#main {margin-left: 100px} /* Main contents with left margin to allow left div to display */

#lef {float: left; width: 100px} /* Note that left div is NOT absolute positioned, but floated within mainboth div, to the left of main */

#footer {position: relative; bottom: 0; margin-bottom: 0; width: 100%; background: #ffffff;} /* background required to stop the "stretching" of body backgrounds */

#top {text-algin:center; margin: 0 auto;} /* Added later for centering top div */

Now the fun begins

<i>
 </i>&lt;body&gt; 
 &lt;div id="mainboth"&gt;
 &lt;div id="lef"&gt;&lt;!-- Left --&gt;&lt;/div&gt;
 &lt;div id="main"&gt;&lt;!-- Main contents of page --&gt; &lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="top"&gt;
 &lt;!-- header contents --&gt; 
 &lt;/div&gt; 
 &lt;div id="nav"&gt;
 &lt;!-- Right Nav --&gt;
 &lt;/div&gt;
 &lt;div id="footer"&gt;
 &lt;!-- Footer --&gt;
 &lt;/div&gt;
 &lt;/body&gt;

Again, try working things around. Note that with floats, left div NEEDS to come before main page contents. Hope this helps. Hope you stay away from tables. Hope you dont need to learn javascript to do positioning and styles ?

And finally, hope not many civilian lives are lost in Iraq.

Also in #HTML _↴

can not remember how to start [RESOLVED] HTML FORM - Default to the first field in the form Website

Success!

Help @Salam spread the word by sharing this article on Twitter...

Tweet This

width problem with div

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

width problem with div

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴