jeudi 24 mars 2016

Alignment of various divs

I am trying to design this layout - refer to the 2nd picture for the overall layout.

  • A is 20px high and has to occupy the entire width of the screen.
  • B is 100px high and has to occupy the entire width of the screen too.
  • C is 200px wide and has to occupy the entire height of the screen, excluding the 120px above it due to A+B.
  • D has no restrictions and adapts to the window resizing.

To elaborate on the problem I'm facing currently, look at the 1st picture.

  • How do I ensure that the center of B3 is always aligned with the center of the text in div A? B1-B4 are 4 different elements I have in the B div. B1, B2, and B4 should remain in the same place. The only "fluid" part is the change in right/left margins for B3 such that it remains center aligned.

My current code can be found at this JSFiddle.

index.html:

<div id="A">A</div>
<header>
  <!-- Header is B in the diagram -->
  <div id="B1">B1</div>
  <div id="B2">B2</div>
  <div id="B3">B3</div>
  <div id="B4">B4</div>
</header>
<div id="C">C</div>
<div id="D">D</div>

style.css:

html, body {
    width: 100%;
    height: 100%;
}

#A{
    width:         100vw;
    height:        20px;
    background:    black;
    color: white;
    text-align: center;
}

header {
    height: 100px;
    width: 100%;
    background: #494949;
    color: white;
}

#B1 {
    width: 100px;
    height: 100px;
    margin-left: 5px;
    margin-right: 47px;
    float: left;
}

#B2 {
    float: left;
    margin-right: 60px;
}

#B3 {
    float: left;
    height: 75px;
    width: 580px;
    margin-top: 12.5px;
  text-align: center;
}

#B4 {
  float: right;
}

#C {
    height: 100%;
    width: 200px;
    float: left;
    position: fixed;
}

#D {
    background-color: #000000;
    float: left;
    margin-left: 200px;
    width: 100%;
    height: 100%;
    position: fixed;
    color: white;
}

I have a video of what I mean in the comments. Also, I would like to point out that I'm not actually naming the divs by alphabet, did it just for this example.

Thanks for any help.




Aucun commentaire:

Enregistrer un commentaire