CSS sidebar misalign... HELP!

Question

Graycode 0 Newbie Poster

16 Years Ago

Hi, I'm desperately trying to solve this annoying issue! I'm trying to place the side bar just underneath the search bar, but I want it to be resized automatically, as each page has differing content so I cannot explicitly define the height. The CSS that is related is below,. If required, I can paste all CSS.

#sidebar {
	background-color:#CCCCCC;
	position:absolute;
	top:0px;
	right:265px;
	width:15%;
	height:200px; 
}
#content {
	margin: 10px 0px 10px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

The site is at and you can see where the sidebar currently sits- on the header!! Additionally, this is created in Wordpress. Your comments and help is much appreciated.

Thanks

html-css:bootstrap php:wordpress web-design

2 Contributors
5 Replies
218 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by Graycode

Dani AI

Generated 7 Months Ago

A concise expert add-on to the thread: the problem was the mix of absolute positioning and floats together with a content column sized to fill the wrapper. As observed, absolute positioning takes the sidebar out of normal flow; ’s margin-left patch is a practical stopgap but will break when page widths, header height, or content vary.

Fundamental points to keep in mind: an absolutely positioned element does not push or adapt to siblings, so it can overlap the header or sit where an ancestor makes it anchor. Floats remain in flow and require column widths that fit inside the wrapper; if the main column is too wide, the sidebar will be forced below or overlap. Also check for a positioned ancestor (position: relative/absolute) — an absolute child will calculate offsets against that ancestor.

Two robust alternatives (both avoid brittle manual offsets):

Float-based (legacy-safe): give the sidebar a fixed width, let the main column float or use a width calculated as wrapper minus sidebar width, and add a clearfix on the wrapper so the footer clears the floats.

/* clearfix */
.wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* two columns */
.main { float:left; width: calc(100% - 240px); }   /* 240px = sidebar + gap */
.sidebar { float:right; width:220px; }

Flexbox (modern, simpler): put content and sidebar inside one container and use flex so the main column grows and the sidebar keeps a fixed width.

.content-area { display:flex; align-items:flex-start; gap:20px; }
.main { flex:1 1 0; min-width:0; }
.sidebar { flex:0 0 220px; }

Quick debugging checklist: inspect computed styles in browser devtools for any position on the sidebar or its ancestors; temporarily add colored outlines to visualize boxes; ensure the footer clears floats; and, for WordPress, confirm the sidebar HTML is in the theme template so CSS applies consistently across pages.

All 5 Replies

Dandello 8 Posting Whiz in Training

16 Years Ago

Well, first - validate all your code - at least then you'll know that what you have isn't broken. (I saw lots of

<link href="style.css" rel="stylesheet" type="text/css" />

in the source code.)

Then - you have

#
#sidebar {
#
background-color:#CCCCCC;
#
position:absolute;
#
top:0px;
#
right:265px;
#
width:15%;
#
height:200px;
#
}

That (in theory) puts your box at the top edge and 265px to the right of the left edge of the page. (But where I'm seeing it on is close to the bottom of the page so there is something else going on as well.)

Dandello 8 Posting Whiz in Training

16 Years Ago

Well, 'float:right' and 'position:absolute' are contradictory. Since the position tag is below the float tag, that trumps. Remove the absolute positioning.

So, from what I gather, the sidebar needs to be below the search bar with the content div to the left of it and both should be within the width set by the top graphic.

In that case the problem is actually with the content div - it's set at 846px which is the full width of your working space. It needs be be set at a width small enough to allow the sidebar to sit next to it. An overly large fixed width in the content div will force the sidebar below it. With the margins and padding you may have to play with it.

And you really don't need all those stylesheet calls. Just the one in the head will do it.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Graycode 0 Newbie Poster · Answer 1 · 2010-06-24T14:37:27+00:00

Thanks Dandello. Ok so something else is interfering with my code? I placed my code in a validator and I saw unrelated errors, background colors etc. COULD this cause the sidebar to misalign completely?? I would like the sidebar to sit relatively instead of defining exact positioning but if i do that and float it right, it disappears... Please see my entire code below:

body {
	font: 75%/150% "Trebuchet MS", Tahoma, Arial;
	color: #333333;
	/*background: #FFFFFF url(images/main-bg.gif);*/
        background: #c0c0c0;
	margin: 0px;
	padding: 0px 0px 40px;
}
a {
	color: #CC6600;
	text-decoration: none;
}
a:visited {
	color: #CC6633;
	text-decoration: none;
}
a:hover {
	color: #FF6600;
	text-decoration: underline;
}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	text-align:center;
	font-size:18px;
	color: #333333;
	margin:0px;
	font: Verdana, Arial, sans-serif;
}
h1 a{
	color: #c9eefe;
	text-decoration: none;
}
h1 a:visited{
	color: #c9eefe;
	text-decoration: none;
}
h1 a:hover{
	color: #ffffff;
	text-decoration: none;
}

h2.pageheader {
	font-size:14px;
	font
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

h2.page {
	font-size:14px;
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

h2 {
	font-size:14px;
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}
h2 a, h2 a:visited {
	color: #59770e;
	text-decoration: none;
}
h2 a:hover {
	color: #FF6600;
	text-decoration: none;
}
/*h3 {
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #758d38;
	margin: 10px 0px 5px;
}*/
form {
	margin:0px;
	padding:0px;
}
#page {
	margin: 0px auto;
	width: 847px;
	/*border-bottom: 5px solid #d5e6eb;
	border-left: 5px solid #d5e6eb;
	border-right: 5px solid #d5e6eb;*/
	background: #FFFFFF /*url(images/content-bg.gif) repeat-y*/;
}
#header {
	height:419px;
	background: url(images/header.jpg) no-repeat;
	position: relative;
}
#lightbox {
	color:#FFF;
	height:70px;
	width:480px;
	padding:360px 0px 0px 20px;
	font-size:14px;
	
}
/*		#headerimg {
position: relative;
padding: 30px 0px 0px 40px;
	height: 60px;
}

/*#headerimg .description{
	position: absolute;
	left: 110px;
	bottom: 3px;
	color: #c9eefe;
	font-size: 14px;
}*/
#nav {
	width:847px;
	background:#FFF;
list-style: none;
	margin: 0px;
	position: relative;
	font-size:14px;
	padding-top: 0px;
	margin: 7px 60px 7px 60px;
/*		right: 100px;
	bottom: 100px;*/
}
#nav li {
	float: left;
	margin-left: 5px;
}


#searchbanner{
	float:left;
	background: #8d8d8d;
		width:847px;
		height:30px;
	position: relative;
	
}

#searchform {
	/*background: #000000 url(images/searchform-bg.gif) repeat-x;*/
	position: absolute;
	margin: 4px 0px 0px 630px;
	width: 273px;
	height:40px;
	float:right;
}
#content {
	margin: 10px 0px 10px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

#textcontent {
	margin:0px 20px 0px 20px;
	width: 580px;
	text-align:justify;
}

#sidebar {
	background-color:#CCCCCC;
	float:right;
	position:absolute;
	top:474px;
	right:207px;
	width:15%;
	height:200px;
	float:right;
	
	
	/*top:474px;
	right: 30px;
	
 	margin:0px 177px 30px 27px;
	width: 220px;
	height:auto;
	float:inherit;
	*/
}


#sidebar h3 { /*for text headers in sidebar*/
	
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: # ;
	margin: 10px 0px 5px;
}

/*------------------------------------------ Box 1------------------------------------------*/
#box1{
	width:214px;
	float:left;
}

#img1{
	width:214px;
	height:194px;
	background:url(images/whatsnew_pic.jpg) no-repeat;
}
#txt1{
	padding: 40px 0px 0px 0px;
	width:214px;
	height:174px;
	background: url(images/whatsnew_text.jpg) no-repeat;
	font-size: medium;
}
/* ------------------------------------------END Box 1------------------------------------------*/

/* ------------------------------------------ Box 2 ------------------------------------------*/

#box2{
	width:207px;
	float:left;
}
#img2{
	width:207px;
	height:194px;
	float:left;
	background:url(images/products_pic.jpg) no-repeat;
}
#txt2{
	padding: 40px 0px 0px 0px;
	float:left;
	width:207px;
	height:174px;
	background: url(images/products_text.jpg) no-repeat;
}

/* ------------------------------------------END Box 2------------------------------------------*/

/* ------------------------------------------ Box 3------------------------------------------*/

#box3{
	width:213px;
	float:left;
}
#img3{
	width:213px;
	height:194px;
	float:left;
    background:url(images/salons_pic.jpg) no-repeat;

}
#txt3{
	padding: 40px 0px 0px 0px;
	width:213px;
	height:174px;
	float:left;
	background:url(images/salons_text.jpg) no-repeat;
}

/* ------------------------------------------ END Box 3------------------------------------------*/


/* ------------------------------------------ Box 4------------------------------------------*/

#box4{
	width:213px;
	float:left;
	
}
#img4{
	width:213px;
	height:194px;
	float:left;
    background:url(images/press_pic.jpg) no-repeat;
}

#txt4{
	padding: 40px 0px 0px 0px;
	width:213px;
	height:174px;
	float:left;
	background:url(images/press_text.jpg) no-repeat;
}

/* ------------------------------------------ END Box 4------------------------------------------*/

/* ------------------------------------------ Text settings ------------------------------------------*/

 
#searchform label {
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}

#footer {
	clear: both;
	background: #048DB4 url(images/footer.jpg) no-repeat;
	height:180px;
	
	font-size: 95%;
	line-height: 130%;
}
#footer a, #footer a:visited{
	color: #ffffff;
}
#footer .left-col{
	width: 240px;
	float: left;
	margin-left: 10px;
}
#footer .right-col{
	width: 220px;
	float: right;
	padding-right: 10px;
	padding-left: 10px;

}
#footer h4 {
	font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
	color: #9cdbfb;
	margin: 10px 0px 5px;
}
.recent-comments {
	list-style: none;
	margin: 0px;
	padding: 0px;
	line-height: 110%;
}
.recent-comments li{
	background: url(images/mini-footer-comments.gif) no-repeat;
	padding: 0px 0px 10px 20px;
}
.recent-comments a{
	font-size: 105%;
	line-height: 130%;
	font-weight: bold;
}
.recent-posts {
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-size: 92%;
	line-height: 110%;
}
.recent-posts li{
	background: url(images/mini-footer-post.gif) no-repeat;
	padding: 0px 0px 10px 20px;
}
.recent-posts a{
	font-size: 115%;
	line-height: 130%;
	font-weight: bold;
}
#credits {
	margin: 0px auto;
	width: 847px;
	color: #000000;
	font-size: 85%;
	line-height: 120%;
}
#credits a, #credit a:visited{
	color: #404040;
}
.rss {
	background: url(images/mini-rss.gif) no-repeat left center;
	padding-left: 18px;
	padding-bottom: 2px;
	margin-left: 10px;
}
.left {
	float: left;
}
img.left, a img.left {
	float:left;
	margin: 4px 10px 5px 0px;
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #FFFFFF;
}
a:hover img.left{
	border-color: #FF6600;
	background: #FF6600;
}
.right {
	float: right;
}
img.right, a img.right {
	float:left;
	margin: 4px 10px 5px 0px;
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #FFFFFF;
}
a:hover img.right{
	border-color: #FF6600;
	background: #FF6600;
}
.clear {
	clear:both;
}
hr.clear {
	clear:both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}
img.img_border, a img.img_border {
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #ffffff;
}
a:hover img.img_border{
	border-color: #FF6600;
	background: #FF6600;
}

Graycode 0 Newbie Poster · Answer 2 · 2010-06-24T23:55:35+00:00

Thanks for that! I have tried what you have suggested and to no avail. I know that I need to modify the content div but increasing it does nothing, but push the page headers across, decreasing it pushes the main page boxes out of kilter...
Not sure how to get around this especially as im working in wordpress so I cannot explicitly define a different content div for the other pages.

Any ideas

Graycode 0 Newbie Poster · Answer 3 · 2010-06-25T00:01:44+00:00

I did it!!

#mainpcontent {
	margin: 10px 0px 0px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

#textcontent {
	margin:0px 20px 20px 20px;
	width: 580px;
	text-align:justify;
}

#sidebar {
	background-color:#CCCCCC;
	margin-left:637px;
	width:210px;
	height:200px;

}

i took the float: right; out of the sidebar and then used a margin to push it into place. Perfect! :) Thanks for the tips and the time looking at my query Dandello, much appreciated! Now I can get on with the rest of the site... :)

G

CSS sidebar misalign... HELP!

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers