0

I'm creating a simple admin console consisting of 3 divs. One div (usersearch) extends to the entire width of the page whilst the 2 remaining divs (privset, privrules) must be next to each other 50:50.

Upon loading the page, only one div shows whilst the other is pushed somewhere else.

<style>
body {
padding:0%;
margin:0%;
overflow: hidden;
}

header {
background-color:black;
color:white;
text-align:center;
padding:5px; 
}

#usersearch {

border-bottom: medium solid;
position: relative;
width: 100%;
height: 40vh;
}
#privset{

border-right: medium solid;
position: relative;
width: 50vw;
height: 100vh;

}

#privrules{
float:right;
position: relative;
width: 50vw;
height: 100vh;


}

footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
position: absolute;
bottom:0;
left:0;
right:0;
}
</style>

HTML below

<div id="usersearch">Customer Information</div>
<div id="privset">Priv set</div>
<div id="privrules">Priv rules</div>
peter_the_oak
  • 3,529
  • 3
  • 23
  • 37
Adam
  • 27
  • 5
  • two divs next to each other says "span" to me – Mark Schultheiss Feb 15 '16 at 15:54
  • Spans can't contain block-level content, so that would be quite a limitation. – isherwood Feb 15 '16 at 15:56
  • Yep, just pointing it out given the presented "text only" div set in the question. Reference; http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span and the element semantics in the specification: https://www.w3.org/TR/html5/dom.html#elements – Mark Schultheiss Feb 15 '16 at 16:52

3 Answers3

0

the css border you were using takes up a pixel or 2, so setting each one to

width: 50vh;

width was too much. either set them to 49vh or get rid of the border.

also, if you want 2 divs floated next to each other, set

float: left;

for both of the divs.

working example here

KC Coder
  • 54
  • 1
  • 8
  • glad i could help. please mark this as the answer if you're satisfied. – KC Coder Feb 15 '16 at 20:37
  • Done. I don't have the privileges to make my up-vote visible at this point. I assume it'll appear as some point. Thanks! – Adam Feb 16 '16 at 00:17
0

You need to float the #privset div and adjust for box-sizing.

Also, using 50vw can cause issues as broswers have different intepretations of the whether any scrollbar is included in the overall width. Use 50% instead for cross-browser support.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#usersearch {
  border-bottom: medium solid;
  width: 100%;
  height: 40vh;
}
#privset {
  border-right: medium solid;
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
}
#privrules {
  float: right;
  position: relative;
  width: 50%;
  height: 100vh;
}
<div id="usersearch">Customer Information</div>
<div id="privset">Priv set</div>
<div id="privrules">Priv rules</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

All elements sitting side by side should be floated. Additionally, if you're using borders and/or padding, box-sizing: border-box should be set.

See this working example: https://jsfiddle.net/lewster32/3zb7xgh2/

SEPTiMUS
  • 1
  • 1