CODEWITHSUNDEEP
cssheightwidthoverflow
Nickersoft
Nickersoft

Reputation: 684

Why does CSS width:100% cause horizontal scrolling?

Okay, so, on my website, I have three panels: cont1, cont2, and cont3. The following are their CSS definitions:

#cont1 { width:35%; position:fixed; background:#2583FE; right:0px; overflow:hidden; float:right; border:1px solid #0961D3; border-left:0px solid black; height:100%;}

#cont2 { height:69%; width:100%; overflow:auto;}

#cont3 { min-height:75px; width:100%; position:relative; display:block;}

Now, if I implement it in the following way, only a vertical scrollbar appears and I can scroll my content as I wish:

<div id="cont1">
     <div id="cont3">First element</div>
     <div id="cont3">Second element</div>
     <div id="cont3">Third Element</div>
     <!--And so on-->
</div>

However, if I implement it in this way (the way that I ultimately want it to work), horizontal scrollbars appear in cont2 for no apparent reason:

<div id="cont1">
     <div id="cont2">
           <div id="cont3">First element</div>
           <div id="cont3">Second element</div>
           <div id="cont3">Third Element</div>
           <!--And so on-->
     </div>
</div>

Usually, I would just put overflow-x:hidden, but I'm trying to make my site as cross platform as possible and I know overflow-x is a CSS3 property (not supported in IE8 or below). Could anyone offer insight as to what might be happening? Thank you!

Upvotes: 1

Views: 1367

Answers (2)

Baron
Baron

Reputation: 379

.cont{
height: 30px;/**/
border-color: black;
/*position: relative;*/
position: fixed;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border: none; 
}

Upvotes: 2

artSx
artSx

Reputation: 1630

To begin, you must use the #id once, there can be only one #id. Uses .classes if you want to put several.

Then I do not understand I do not have this problem on jsFiddle, I wonder if this is the edge that is used in #cont1 that you created this bar.

You have a page to show us the problem live?

Upvotes: 0

Related Questions