- This topic is empty.
-
AuthorPosts
-
February 12, 2013 at 6:29 am #42671PaulB1974Member
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
February 12, 2013 at 6:41 am #124170Paulie_DMemberI 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.
February 12, 2013 at 6:49 am #124172planetabhiMemberQuick resolve :
1) Loose **position** from **div#main**
2) In **div#sidebar** reduce** width** to **320px**February 12, 2013 at 6:49 am #124173PaulB1974MemberHey 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!)
February 12, 2013 at 6:51 am #124175PaulB1974MemberThanks 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 :'(
February 12, 2013 at 7:21 am #124180Kitty GiraudelParticipantIf I may, there is no point in qualifying your selectors, especially since you are using IDs which are by definition unique.
February 12, 2013 at 7:33 am #124181Paulie_DMemberYou might want to try a layout a little more like this: http://codepen.io/anon/pen/jLxKD
See?…no positioning at all!
February 12, 2013 at 7:34 am #124182PaulB1974MemberHi and thanks -not sure what that means though sorry :(
February 12, 2013 at 7:37 am #124183PaulB1974MemberThanks Paulie_D and I think I might have to do some more learning!!!
February 12, 2013 at 7:39 am #124184Paulie_DMemberI 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.
February 12, 2013 at 8:01 am #124199PaulB1974MemberOh I see! I got that from the Lynda.com tutorial lol
February 12, 2013 at 8:12 am #124200clagobMemberHi
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.
February 12, 2013 at 8:14 am #124201clagobMember<div id="main">
…
<div class="clear"></div>
</div>
February 12, 2013 at 8:26 am #124202Paulie_DMember>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. :)
February 12, 2013 at 8:26 am #124203PaulB1974MemberThanks clagob – I never did understand the “clear” thing :/
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.