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