css border around my div layout

StackOverflow https://stackoverflow.com/questions/23196134

Question

Hi I'm running into a bit of trouble with my layout

I want to put a border around all the outside of the layout and when the browser is re-sized it will still be there. how would i do this without affecting the responsiveness of the layout and media queries? Was thinking maybe a border that's on the inside of the div?

also not sure what I've done but im getting a gap in my <div> you can see under the logo.

http://www.techagesite.com/page-1work11122.htm

Was it helpful?

Solution

Demo

css

html {
    height: 100%;
    width: 100%;
    display: table;
}
body {
    display: table-row;
}
.mainBody {
    display: table-cell;
    border: 10px solid blue;
}

Example html

<body>
    <div class="mainBody">all your content here</div>
</body>



To add border to every element on page use universal selector '*' as below:

* {
 border: 5px solid #3A5FCD;
}



And finally cheers, it was a simple edit but due to lack to understanding the problem it took such a long time, anyways your sample pic help me to realize your want.

Just replace your body{..} with 

body {
  margin: 0 auto;
  background: #333;
  max-width: 1200px;
}

(remove display: table-cell, margin auto will make it horizontal center with max-width)

OTHER TIPS

also not sure what I've done but im getting a gap in my you can see under the logo.

Change the height attribute of box2 or box3 to match each other. Currently,the height for box2 is 179px and box 3 is 203px. So make height of box2 to203px or change height for box3 to 179px.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top