HTML & CSS – min-height: 100% is not working on my website
I am making a website. I want to divide the website into 2 columns of various width, both of the same height. So no matter if the right column has more text or the left, I want them both to be equal in horizontal length.
My code:
body { background-color: #003399; color: #FFCC00; margin: 0; padding: 0; } .main-part { float: left; width: 60%; border-right-style: solid; border-right-color: #FFCC00; border-right-width: 3px; margin-right: 10px; height: 100%; min-height: 100%; } .additional-part { height: 100%; min-height: 100%; /* margin-left: 10px; */ }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="main-part"> <h1>Main text</h1> </div> <div class="additional-part"> <h1>Additional text</h1> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> </div> </div> </body> </html>Problems:
-
The right column – as seen both with the border-right attribute and "aaaaa" in the left – is running till it finishes its text, then it is abruptly ending and the left column is taking its place instead of being kept to the left side properly as I wish. It wanna two columns of the same size, and currently I have a "box" on the right and "jumping" div on the left which is not keeping to itself.
-
I do not know why, but when I look at the right top-header and left top-header (I’m talking about the main text and additional text elements), they are on two separate levels, the right being lower than the left. I want them to start at the same "height" to be symmetric and nice-looking.
Here is grid-box which let us to make particular columns and rows and there after insert the contents according to our will it is the best way of making grid layouts
body { height: 100vh; } .container { display: grid; grid-template-columns: repeat(2, 1fr); background: darkcyan; width: 100%; height: 100%; } .main-part { width: 100%; border: 1px solid red; text-align: center; } .additional-part { text-align: center; width: 100%; border: 1px solid blue; }<div class="container"> <div class="main-part"> <h1>Main text</h1> </div> <div class="additional-part"> <h1>Additional text</h1> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> <p>Aaaaa</p> </div> </div>
If you are using bootstrap 4 < no you can use .row and .col
otherwise, try this
.container{ display: flex; flex-flow: row wrap; } .main-part, .additional-part { background-color: red; } 
100% is 100% of parent element (body), but body is adapting it’s size to its children. You should use min-height: 100vh instead.
Also, don’t use float for anything but images and "blurbs" in text. In this case, I would use display: flex instead to position your elements.
