Moving things in a page - positioning

liverpoolphil

New Member
done as you said chris but now the FB plugin's completely gone! II guess this is something to do with the "margins in the header section"?


*Answered my own question, it was something to do with the header section
 
Last edited:

PixelPusher

Super Moderator
Staff member
Put "sidebar before "main" and set it's width to 28% ...

Eh...you can do this, but know that you dont have to.

I have often found that because floating an element creates a block box and how some rendering engines calculate width, putting the right float first allows the engine to calculate the flow correctly without having to shave extra bits of widths, margins or paddings off the elements in the float plane.

Odd, I have not found this to be a problem. Fixed layouts, it is very simple...I could perhaps see an issue with fluid layout however being that we are using percentages and not fixed values.
 

PixelPusher

Super Moderator
Staff member
Phil if you are going to fix the width of your site, which it looks like you are, there really is no need to use percentage based values for the width of the columns. I know, I wrote them in there in my example, but if you change them to a pixel value that will eliminate the stacking problem.

Plus, you dont need to wrap your #sidebar with another div.

Percentages are better suited for fluid layouts.
 

liverpoolphil

New Member
chrishirst, PixelPusher - THANKS for your help with this. I have managed to get the result I wanted, not ideal I know but it will do for now.
 

ronaldroe

Super Moderator
Staff member
Lol - I have had the feeling for the last hour that "divitus" was occuring. Apart from manually checking every <div> for its corresponding </div> are there any clever ways of curing divitus?

Get out of the habit of "wrapping" things in a div. Style the actual element where possible, and use divs for what they are: divisions. If you have a group of elements that are grouped together, put a div around them. For example: if you're using XHTML or HTML4, and you have a header with an h1 and h2, do like so:
HTML:
<div class="header">
 <h1>Text here</h1>
 <h2>Text here</h2>
</div>
Instead of:
HTML:
<div class="header">
 <div class="logo">
  <h1>Text here</h1>
  <h2>Text here</h2>
 </div>
</div>
Now, generally, you'll probably have the h1 and h2 in the same area of that header. The h1 and h2 are block elements. Style them directly instead of adding another div around them. Let's say the header is 100% width and the h1 and h2 sit on top of one another 5% from the left:
Code:
.header{
 position:relative;
 height:60px;
 width:100%;
}
.header h1, .header h2{
 position:relative;
 left:5%;
}

See? No more divs than necessary. You can honestly style any element in almost any way. If you wanted, you could style <b> tags (bold) to act like divs. There's no practical or semantic purpose for that, but it's entirely possible.
 
Last edited:
Top