div tag being pushed down

Posted on 2011-02-23
Medium Priority
Last Modified: 2012-05-11
I want to have a sidebar and main contents to display all the way at the top of the page.  However-only sometimes-(iE8) the main content has a large white space and starts displaying only below the sidebar content,
.twoColHybLt #container { 
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
.twoColHybLt #sidebar1 {
	float: left; 
	width: 18%; /* since this element is floated, a width must be given */
	padding: 0px 0;  /*top and bottom padding create visual space within this div  */
.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;

.twoColHybLt #mainContent { 
	margin: 0 20px 0 12em;  /*the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */

Open in new window

Question by:JSCF
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
LVL 16

Expert Comment

ID: 34962571
It happens because the sidebar div has a content component that is wider than it's with (18%)
To verify it, use overflow:hidden in the sidebar style.
LVL 16

Accepted Solution

HagayMandel earned 2000 total points
ID: 34962588
It happens because the sidebar div has a content component that is wider than its width (18%)
To verify it, use overflow:hidden in the sidebar style.
[problems with my keyboard]

Author Comment

ID: 34963284
Why does it happen onl yin IE8?
LVL 16

Expert Comment

ID: 34963681
Cause other browsers usually crop the extra width.

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month9 days, 5 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question