6 Replies - 816 Views - Last Post: 25 March 2011 - 06:04 PM

#1 Shadow X  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 16
  • Joined: 25-March 11

CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 04:21 AM

Hey everyone!

I just started learning CSS to make website and I am now stuck in a problem. My CSS layout have a content area and a sidebar, but when the sidebar has much more content than the content area it height will increase. This cause an excess space at my content box. The same goes for the sidebar, when my content area has more content than my sidebar, this happens.

I guess looking at the image that I uploaded will help you to see a better picture (http://img708.imageshack.us/i/bgquestion1.jpg/) I would like to fill the excess area at my content box with white color.

This is my master CSS list for the layout,

@charset "utf-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #1a1c1e;
}

.hidden {
	display: none;
}

#page-container {
	width: 1008px;
	margin: auto;
}

#header {
	background: #232324
		        url(http://zn-mf1.webs.com/banner1.png);
				border-top-color: #606060;
				border-top-style: solid;
				border-top-width: 1px;
				border-bottom-color: #606060;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-left-color: #606060;
				border-left-style: solid;
				border-left-width: 1px;
				border-right-color: #606060;
				border-right-style: solid;
				border-right-width: 1px;
	height: 150px;
}

#sidebar-a {
	float: right;
	width: 280px;
	height:auto;
	background: #242426;
	line-height: 18px;
}

#sidebar-a .padding {
	padding: 25px;
}

#content {
	margin-right: 280px;
	background: #FFF;
	line-height: 18px;
}

#content .padding {
	padding: 25px;
}

#footer {
	clear: both;
	background: #171717;
	height: 66px;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;
	border-top: 1px solid #efefef;
	padding: 13px 25px;
	line-height: 18px;
}

#footer a {
	color: #c9c9c9;
	text-decoration: none;
}

#footer a:hover {
	color: #db6d16;
}

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
}

h1 {
	margin: 0;
	padding: 0;
}

#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}



Hope you guys get what I mean. Hoping for a reply soon, thanks alot! :)

This post has been edited by Shadow X: 25 March 2011 - 04:25 AM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS: Filling Colour in Excess Content

#2 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Re: CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 08:23 AM

I took a look at your image. Do you have a live link? Being able to go through the html page would be a great help.
Was This Post Helpful? 0
  • +
  • -

#3 Shadow X  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 16
  • Joined: 25-March 11

Re: CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 08:30 AM

View PostVip3rousmango, on 25 March 2011 - 08:23 AM, said:

I took a look at your image. Do you have a live link? Being able to go through the html page would be a great help.


Yes I do. Here it is, http://zn-mf1.webs.com/index.htm (unsolved page).

However I managed to get a solution from another coding forum about 10 minutes ago and it work. I simply need to add <div style="clear:both;"></div> to my container and sidebar HTML div area. :) An example is below,

<div id="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
        Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
<div style="clear:both;"></div>
</div>


Hope this help for anyone else having the same issue. :)
Was This Post Helpful? 0
  • +
  • -

#4 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Re: CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 08:46 AM

Nice!

Well there you go! Sometimes it takes asking the question for you to find the right answer yourself!

Yes, you should always remember to clear your content/sidebar div's if you're going to float elements in your header/ the header itself otherwise you get the problem you're experiencing!

Good for posting the solution for others as well.
Was This Post Helpful? 0
  • +
  • -

#5 Shadow X  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 16
  • Joined: 25-March 11

Re: CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 11:16 AM

Unfortunately the happiness is short lived. The content now works perfectly but the side bar is having the same issue despite having <div style="clear:both;"></div>. I don't really know any other methods to get the side bar to fill up it own background color to the bottom of my footer since I just learn CSS yesterday.

URL to my second test page with the side bar problem: http://zn-mf1.webs.com/index1.htm

Anyone has a solution to this problem? Will appreciate it. :) Thanks!

This post has been edited by Shadow X: 25 March 2011 - 11:17 AM

Was This Post Helpful? 0
  • +
  • -

#6 init.d.httpd  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 132
  • Joined: 02-February 11

Re: CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 12:54 PM

make #sidebar-a have a set height

or

you can wrap content and #sidebar-a in another div and use a vertically repeating background image that has white on the left and your gray on the right, and make #sidebar-a and content background:transparent.

The latter way being the way to make the page background correct dynamically.
Was This Post Helpful? 1
  • +
  • -

#7 Shadow X  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 16
  • Joined: 25-March 11

Re: CSS: Filling Colour in Excess Content

Posted 25 March 2011 - 06:04 PM

View Postinit.d.httpd, on 25 March 2011 - 12:54 PM, said:

make #sidebar-a have a set height

or

you can wrap content and #sidebar-a in another div and use a vertically repeating background image that has white on the left and your gray on the right, and make #sidebar-a and content background:transparent.

The latter way being the way to make the page background correct dynamically.


Hey there,

Thanks for the solution. I eventually use your second method and it work perfectly. I have a question left though, if I am designing a CSS layout and have 2 side bars and 1 content column, then the repeat background image will still work on it right?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1