CODEWITHSUNDEEP
csshtml
Michael Gresham
Michael Gresham

Reputation: 53

HTML Website too wide

This is the website I am modifying: sb460training.org

Here is the code snippet:

#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}

Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page? Thanks

Upvotes: 0

Views: 20827

Answers (3)

Samuel Archibong
Samuel Archibong

Reputation: 1

I've heard the same similar issue. all you need to do is try working with margin set to 0 and auto.

in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.

Upvotes: 0

atkinchris
atkinchris

Reputation: 66

Like the other answers, I agree that your CSS should change the fixed widths to 100%.

However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.

I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.

UPDATE

Quick and dirty example:

http://pastebin.com/4PmZN1r4

Upvotes: 2

LOTUSMS
LOTUSMS

Reputation: 10240

  1. change all your container widths to 100%.
  2. give your html a width:100%; margin:0;
  3. give your body a fixed width:1200px or so.
  4. set your body with a margin: 0 auto if you want it centered.

Upvotes: 0

Related Questions