Moving things in a page - positioning

liverpoolphil

New Member
Originally posted in the CSS positioning thread...but was told to start a new one :confused:

hi all - new to the forum and going to be spending the next few days browsing its information. In the meantime, perhaps you may be able to help with an issue (or lead to a tutorial to help) I am having with my site. www.top-marks.org.uk, its a basic but functional site and I want to put the facebook "like box" along the right hand side of the page (like the one on www.sillybomb.com). I am also aware of some positioning issues with ff and IE, so again any guidance would be appreciated. In the meantime, great forum, hope to be around a while :)
 

chrishirst

Well-Known Member
Staff member
It is not positioning you should use for that, but floats.

Basically your "positioning" problems are caused by incorrect use of positioning. Position: absolute; in particular.

But as I can tell from the CSS it is a document created in the WYSI[sometimes]WY[might]G view of Dreamweaver.

Get out of that view and learn to write code.
 

liverpoolphil

New Member
cheers for the point in the right direction chis - I cant remember where the template come from for the site, but you can see its clearly been "chopped and changed" over the past 12 months or so and I am definitely no coding expert lol. It could probably do with a complete overhaul, but really I would be happy if I could just place the fb likebox in the correct position for now :) :)
 

PixelPusher

Super Moderator
Staff member
Phil you will want to create a simple two column layout. As stated this can be best achieved using floats. There is also a sticky in this forum about using floats. For semantic reasons, I would float the main body (content) left and then follow that with you sidebar floated right. This way, when you look at the markup of your site, the more important information is written first.

HTML:
<div class="wrapper">
  <div id="main">
    <!-- Left column -->
  </div>
  <div id="sidebar">
    <!-- Right column -->
  </div>
</div>
Code:
div.wrapper {
width:960px;
overflow:hidden;
}
#main {
float:left;
width:70%;
}
#sidebar {
float:right;
width:25%;
}
 

liverpoolphil

New Member
thanks for this John, very helpful for me. As my site is a bit of a mismatch in terms of coding, I am going to start a fresh and code it correctly (with the help of this forum I hope). I will also address the sticky on this topic, and others, an report back on progress

thanks again :)
 

liverpoolphil

New Member
ok..some progress. With pixelpusher's help I was able to set up a simple 2 column layout (i think) in my existing code (not ideal I know!). The result of this is a slight movement of the FB plugin in the right direction. What I would like it to do now is move to the top of the page...still playing away but thanks for any help in advance
 

PixelPusher

Super Moderator
Staff member
ok..some progress. ...What I would like it to do now is move to the top of the page...still playing away but thanks for any help in advance

Phil could you post a link to the new site? I would be easier if we can look at the markup of the page.
 

chrishirst

Well-Known Member
Staff member
That depends on the layout.

In this case as you can plainly see from where the right floated element contact point is, putting the right float first WILL allow it to be alongside the header block at the top of the client window.
 

chrishirst

Well-Known Member
Staff member
Lose the width applied to the body element, setting a fixed width is one of the reasons for "wrapper" elements.


And you have the body set at 636 pixels wide while the "wrapper" was set at 960 pixels!
 

liverpoolphil

New Member
Lose the width applied to the body element, setting a fixed width is one of the reasons for "wrapper" elements.


And you have the body set at 636 pixels wide while the "wrapper" was set at 960 pixels!

thanks chris...although this seems to have just moved everything to the left. Setting the width to 960 pixels seemed to re-align it though
 
Last edited:

chrishirst

Well-Known Member
Staff member
You have a strange cas of "divitus" going on with that layout??


Was this by some change a DW WYSIAWYG layout?

(The extra 'A' stands for Almost)
 

liverpoolphil

New 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?
 
Last edited:

PixelPusher

Super Moderator
Staff member
That depends on the layout.

In this case as you can plainly see from where the right floated element contact point is, putting the right float first WILL allow it to be alongside the header block at the top of the client window.

That is not a reason to change which item is floated first, but rather an adjustment to the width values.
 

PixelPusher

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?

Yeah keep the division elements to a min. Use only what you need.
Here is a quick example of a fixed layout:

Fixed Layout

(This keeps the most important info first, ensuring semantic flow to the document)
 

chrishirst

Well-Known Member
Staff member
Put "sidebar before "main" and set it's width to 28%

HTML:
<body>
<div class="wrapper">
  <div class="sidebar">
<div id="sidebar">
    <!-- Right column -->
  	<div class="fb-like-box fb_iframe_widget " data-href="http://www.facebook.com/pages/Top-Marks-Private-Tuition-Ltd/116147285117629" data-width="292" data-height="500" data-colorscheme="dark" data-show-faces="true" data-stream="true" data-header="true">	  
<span style="height: 500px; width: 292px;"><iframe src="index_files/likebox.htm" class="fb_ltr" style="border: medium none; overflow: hidden; height: 500px; width: 292px;" name="f29e74ccb0ceb34" id="f132f7858e0c332" scrolling="no"></iframe></span></div>
  
</div>
</div>
  <div id="main">

You just need to play with the margins on the header section.
 

chrishirst

Well-Known Member
Staff member
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.
 
Top