I am pretty new to everything and is trying to achieve header, 2 boxes with different width and a footer. Everything all together but I need to make so when content in the box is changed the height always stay the same.
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project. I should be using floats as much as I can!
I want to achive the look like this photo i attach here: enter image description here
What it looks like now: enter image description here
`
<body>
<div class="wrapper">
<header><h1>Hej Header</h1></header>
<nav>
<div class="box">
<div class="box-row">
<section id="s1"><h1>Här är sektion nummer ett</h1></section>
<h1 class="rubrik1">Högskolan Nivå 1</h1>
<p id="p1"> Zombie <a href="images/dollar.png">zombies</a> ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
<h2 class="rubrik2">Rubrik 2</h2>
<p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
<h3 class="rubrik3">Rubrik 3</h3>
<p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
<section id="s2"><h2>Här är sektion nummer två</h2></section>
</div>
<footer><h1>Hej Footer</h1></footer>
</nav>
</div>
</body>
`
My CSS:
`
@font-face {
font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf');
font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf');
}
* {
background-color:#eee;
}
p {
font-family:Helvetica, Arial, Sans-serif;
color:#222;
font-size:14px;
}
.rubrik1 {
font-family: MuseoSans, helvetica, sans-serif;
color:#009;
font-size:28px;
}
.rubrik2{
font-family: RobotoCondensed, helvetica, sans-serif;
color:#009;
font-size:16px;
}
.wrapper {
float: left;
max-width:960px;
width:960px;
background-color: white;
border-width:1;
border-style: solid;
border-color:#ccc;
}
header {
border-style:double;
height: 140px;
}
footer {
border-style:double;
height:200px;
float: left;
width: 954px;
}
nav{
float:left;
padding:12px;
border-style: double;
width: 600px;
}
#s2{
float: left;
border-style:double;
}
`
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project. I should be using floats as much as I can!
Perhaps this simple Flexbox layout might help as a starting point? According to the desired layout image it seems to replicate that quite closely. The nav element seemed to contain content that did not really constitute navigation so that was removed but could easily be slotted into the LHS section or header?
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
flex-direction: column;
width: 80%;
height: 100vh;
margin: 0 auto;
}
header,main,footer,main>section {
display: flex;
margin: 0;
border: 1px solid rgba(133, 133, 133, 0.5);
}
header {
flex: 2;
order: 1;
align-items: center;
justify-content: center;
}
main {
flex: 10;
order: 2;
}
footer {
flex: 1;
order: 3;
align-items: center;
justify-content: center;
}
main>section:nth-of-type(1) {
flex: 10;
order: 1;
}
main>section:nth-of-type(2) {
flex: 4;
order: 2;
}
/* ONLY for visually identifying elements */
header {
background: azure
}
main {
background: yellow
}
footer {
background: pink
}
main>section:nth-of-type(1) {
background: rgba(0, 255, 0, 0.25);
}
main>section:nth-of-type(2) {
background: rgba(255, 0, 0, 0.25);
}<div id='wrapper'>
<header>#header#</header>
<main>
<section>#LHS-Large#</section>
<section>#RHS-Small#</section>
</main>
<footer>#footer#</footer>
</div>