CODEWITHSUNDEEP
htmlcss
optionsix
optionsix

Reputation: 956

issue with fullscreen web layout using css

I've got a fullscreen web layout, with two "floating" boxes of text, which are positioned approximately in the middle of the screen. Here is the css for the boxes (they are identical except for vertical orientation on the page):

#home-box-1
{
background-image:url('../images/px_trans_brown.png');
margin-top:16%;
margin-left:25%;
width:850px;
height:176px;
}

At fullscreen at 1920 x 1080, it looks perfectly fine. The boxes are set to be sized so that they will fit at size minimum (1024 x 768), with room to spare on each side. However when the screen is resized, there is alot of dead space on the left hand side, and the box goes off the screen on the right.

Im no expert at css, but I was under the impression that the "margin-left:25%", would keep a 25% margin from the edge of the screen, no matter what the browser window size.

Anyone have any clue as to how I can fix this?

Upvotes: 0

Views: 165

Answers (1)

K.Q. Dreger
K.Q. Dreger

Reputation: 192

This will keep the boxes centered, and keep small margin around them.

body {
  margin-left: 75px;
  margin-right: 75px;
}
#home-box-1 {
  background: #aaa;
  margin-top:16%;
  margin-left:auto;
  margin-right: auto;
  max-width:850px;
  height:176px;
}

Upvotes: 2

Related Questions