div tag being pushed down

Posted on 2011-02-23
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 500 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

705 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