Forums

PaulB1974

Hello guys I am brand new :)

I have the following css rules: -

div#main {
position:absolute;
margin-top:260px;
margin-left:5px;
padding-top:30px;
float:left; 
width:700px;
background: url(../images/black_fade_bg.png) repeat;
      }

div#sidebar {
  margin-top:260px;
  padding-top:30px;
  float:right; 
  margin-right:5px;
  width:330px;
  background: url(../images/black_fade_bg.png) repeat;
}

The problem I have is that the height of the content in the "main" div is different in each page and mostly supersedes the sidebar so the background tiled image stops on that side and the main div rolls over on to the footer.

I really hope this makes sense, here is the url and I am new to CSS :)

http://www.brighteroutlookwindows.com/2013/web/about.php

Thanks guys :)

Paul

Paulie_D

I would tell you just to wrap the main & sidebar in a div and apply the background image to that div instead of the inside ones.

That might still work but you have so much unnecessary absolute positioning going on I suspect this might break your page layout completely.

Is there a reason why you are using absolute positioning?

It's really not necessary most of the time...there are much better ways of laying out pages these days.

planetabhi

Quick resolve : 1) Loose position from div#main 2) In div#sidebar reduce** width** to 320px

PaulB1974

Hey Paulie_D

Thanks - I did create a "content" div and wrapped both main and sidebar in it but it wouldn't work for some reason!

I'm really quite new to positioning and css in general as I used tables (aarrgh!)

PaulB1974

Thanks planetabhi - that worked although the background of the sidebar now doesn't reach the bottom! JUST when I though I was getting the hang of CSS :'(

HugoGiraudel

If I may, there is no point in qualifying your selectors, especially since you are using IDs which are by definition unique.

Paulie_D

You might want to try a layout a little more like this: http://codepen.io/anon/pen/jLxKD

See?...no positioning at all!

PaulB1974

Hi and thanks -not sure what that means though sorry :(

PaulB1974

Thanks Paulie_D and I think I might have to do some more learning!!!

Paulie_D

I think what Hugo means is there is no need to put div#sidebar because you can only have one thing with an ID of sidebar so #sidebar is enough.

PaulB1974

Oh I see! I got that from the Lynda.com tutorial lol

clagob

Hi Just move the background to #content.

#content{background: url("../images/black_fade_bg.png") repeat scroll 0% 0% transparent;}
.clear{clear:both}

at the end of each #main and #sidebar append something like

...

PS: avoid the use of postition:absolute, if not necessary.

clagob

Paulie_D

I got that from the Lynda.com tutorial lol

I wonder how old that tutorial is?

If it was suggesting absolute positioning...it must be ancient. :)

PaulB1974

Thanks clagob - I never did understand the "clear" thing :/

PaulB1974

haha - I must keep up!

PaulB1974

Guys I owe you all one - I though position:absolute was necessary but I've just changed it all :) I'll show you the link soon - guys thank you!

PaulB1974

So going back to my original issue - what I have done is remove all absolute positioning and I've wrapped the main and sidebar into a content div with repeating background although the background doesn't want to know :(

Paulie_D

Hmm...your submenus are in odd places but that's probably not related...although it's something you might want to fix.

However, as your main and sidebar divs are floated you need to add

   overflow:hidden ;

to your #content div.

PaulB1974

AHA! Perfect! thank you! I am using Firefox and it looks ok, I have yet to view it in Chrome

treehouse : what would you like to learn today?

Forums

[Solved] Background colour repeat