How to stop web page expanding when positioning a div


I am in the process of building my first ever webpage and i’m having issues with positioning.

I have manage to position most elements on my page fine (well, I think I have, all appear to be in the right place) but when I try to position a twitter feed, which I’ve wrappeed in a div the page expands in width.

When I remove the twitter div or don’t position it in CSS the page doesn’t expand. I have tried both absolute and relative positioning and get the same results.

Should I be using a different method to position or am I missing some mark up

Also, the page displays how it should in most browsers but then is all over the place on my iphone and andriod tablet. see link below

Any help appreciated

Thanks in advance


Sorry - I don’t have time to look at this properly just now. However, you have an extra pair of <body> tags which might be screwing things up. Try removing them and see if that helps anything. :slight_smile:

<div id="navigation">
      <body id="body_hom">
      <ul id="nav">
        <li id="nav_hom"><a href="home.html">Home</a></li>
        <li id="nav_abo"><a href="about.html">About Us</a></li>
        <li id="nav_you"><a href="youth.html">Youth Project</a></li>
        <li id="nav_eds"><a href="support.html">EDS Programmes</a></li>
        <li id="nav_for"><a href="forum.html">Forum</a></li>
        <li id="nav_eve"><a href="events.html">Timetable</a></li>
        <li id="nav_con"><a href="contact.html">Contact Us</a></li>
    </div> <!-- end of navigation div -->

You should only have one pair of body tags on each page. (I’m sure you knew that.)

Hi Mic,

for layout you rarely every need to position anything, so I’d do away with all the relative and absolute positioning on all elements, including your logo.

You have a very simple layout and it screams to be done with floats. This will also resolve your display issues on mobile devices (tablets, phones).

Set a width on the various containers and float them where needed.

See this article for a thorough explanation on how to work with floats:

More reading:

The three links I posted should give you a solid insight on what to use when and why.

Sorry I should have explain I am completey new to web design only a month in infact.

I know of this rule but in the book “The Art and science of CSS” it shows how to style the navigation bar to show which page you are on, so I have just replicated the mark up.

What mark up could I use to keep this effect and lose the extra body tag?


#twitter {
position: absolute;
display: inline;
top: 490px;
left: 903px;
#navigation {
position: absolute;
top: 100px;
left: 170px;
width: 1000px;
height: 30px;
padding-bottom: 0px;
padding-top: 0;
margin: 0px auto;
margin-left: 0px;
margin-bottom: 3px;
border: 0px green;
background: #228653;
#navigation ul {
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
#navigation ul li {
width: 142px;
float: left;
margin: 0px;
padding: 0;
border: 0px solid #61D8A2;
#navigation ul li a {
font-family: verdana, arial;
text-decoration: none;
display: block;
width: 142px;
height: 30px;
line-height: 30px;
font-size: 11pt;
color: #61D8A2;
#navigation a:hover {
background-position: 0px;
font-weight: 675;
color: white;
#body_hom #nav_hom a, #body_abo #nav_abo a, #body_you #nav_you a,
#body_eds #nav_eds a, #body_for #nav_for a, #body_eve #nav_eve a,
#body_con #nav_con a {
background: #61D8A2;
font-weight: normal;
color: white;

Thanks for the advice

Thank Kohoutek, i’ll give it a go

By copying markup from other places (or books) you’re making it harder for yourself, given that you’re new to the field. Almost all of the code—which I hope is not from the book, as it’s flawed to no end—is problematic, wrong, or redundant.

If you want to have a solid site, one that doesn’t break, then the only option you have is to start from scratch. This might sound horrible to you, but it’s better to learn how to properly design a site than starting off wrongly. You’ll have more headaches and more frustration by keeping the code you currently have.

Start with the basics, perhaps take a CSS and HTML course (SitePoint has some on Or start with a good tutorial site such as

You could just move the id to the correct body tag and delete the extra one.

The opening <body> should always come immediately after the closing </head> tag. Change that to read <body id=“body_hom”>, as it’s this id which is allowing you to target this page specifically in your styles. The closing </body> tag should come right at the end of all your markup, right before the closing </html> tag. Delete the ones surrounding your nav menu. Does that help?

I agree with everything kohoutek has said. It’s much easier to learn by writing your own code than by trying to copy someone else’s and make it work. If you get stuck in the process, you can always come here and ask. :slight_smile:

Thanks Technobear!

All the advise I will be taking on on board, just working on the floating method now!

Oh and thanks the advise on removing the body id tag around the navigation and putting in the opening body tag works a treat and makes complete sense

If it works - great, and if it makes sense - even better. :slight_smile:

Hi kohoutek

Big thanks for the floating and clearing article, I revamp the whole site and I’m finding it alot more smoother to maintain. All pages passed the html validator apart from the ones with the external twitter feed, facebook like box and external contact form

Thanks again

just sturggling to link the forum now??

You need at least 10 posts to your account before you are allowed to post links. In the mean time (not that it matters since you have 9), you can do something like this.

http : // www . sitehere . com / page . php

Have you managed to sort that out? If you’re still needing help, a few more details about the problem wouldn’t go amiss.:slight_smile:


Not true. :slight_smile: However, I think m16guy was referring to a problem linking in the forum on his own site, rather than a problem posting links here.[/ot]

That’s great to hear, m16guy!

If you have understood the content of the articles I posted, which is not easy reading for someone new to the topic, then you’re way ahead of most and have a solid foundation for building stable layouts. :slight_smile: