Kostas Kostas - 2 months ago 12
CSS Question

Left Div has uneven height because of text on the right Div, looking for fix with html/css

I have this layout. As explained inside the image I want the left box to follow the height of the right box, which changes because of the text I am putting inside the article(To clarify it is ok for the right to change height cause of the text). I want a fix only with HTML/CSS if possible.
enter image description here

HTML simplified code

<body>
<div id="left">this is div1</div>
<div id="right">
<p>Also has a bunch of text here which makes the div go uneven with the left</p>
</div>
</body>


CSS part

#left{
width: 15%;
min-height: 800px;
}

#right{
width: 85%;
min-height: 800px;
}

Answer

body {
  display: flex;
}

body * {
  margin: 0;
}

#left{
  width: 15%;
  background-color: blue;
}

#right{
  width: 85%;
  background-color: red;
}
 <body>
    <div id="left">this is div1</div>
    <div id="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet lorem in ultricies interdum. Nulla diam ex, hendrerit ac commodo eu, venenatis vel justo. Aliquam erat volutpat. Donec fermentum nisl orci, in consectetur mauris sagittis in. Aenean blandit lorem quis commodo vehicula. Donec varius risus nec neque lobortis, sed tristique ex facilisis. Integer eget diam ac velit porttitor tristique mollis in lorem.

In sit amet porttitor dolor. Proin scelerisque augue quis lectus pellentesque, vel sollicitudin sem mollis. Vivamus finibus odio purus, at auctor mi rhoncus vitae. Nullam feugiat convallis purus, a pellentesque ipsum pretium ut. Quisque sit amet ante sem. Etiam ac justo venenatis, auctor enim vitae, egestas erat. Suspendisse sollicitudin ligula in quam mattis, vitae feugiat dui aliquet. Maecenas malesuada rhoncus ipsum aliquam euismod. Sed egestas, felis sed posuere ullamcorper, risus orci pulvinar odio, et efficitur leo libero nec turpis. Morbi vitae laoreet quam. Aenean imperdiet imperdiet leo, non varius arcu efficitur nec. Pellentesque vestibulum purus sed nibh venenatis imperdiet. Praesent porttitor et massa nec pretium. Nullam lacinia tellus ipsum, in bibendum massa sollicitudin eu.

Vestibulum lobortis sit amet leo a molestie. Vivamus commodo justo nulla, eget luctus lorem faucibus at. In maximus ullamcorper dolor at ullamcorper. Nam pellentesque interdum eleifend. Maecenas dapibus turpis et erat consequat dignissim ac in lorem. Aliquam varius nisl et pulvinar bibendum. Cras in augue sed diam viverra porttitor non et odio. Sed at libero elementum, congue nisl at, bibendum risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris elementum massa vel felis placerat volutpat. Donec vel elit eu arcu varius sagittis. Maecenas ut ante efficitur, viverra magna sed, gravida diam. Quisque scelerisque, magna sed dignissim fringilla, justo ex commodo purus, id faucibus libero nisl facilisis est. Maecenas ullamcorper ultrices dapibus.

Integer suscipit, augue vitae elementum venenatis, erat magna congue justo, a facilisis enim turpis a eros. Morbi faucibus elit eget sodales suscipit. Cras dictum feugiat nisi, at vulputate nisl aliquet eget. Suspendisse id consequat tortor. Nullam facilisis a risus sit amet finibus. Nunc tristique felis nisl, laoreet maximus urna malesuada a. Curabitur nunc mi, ornare eu odio eu, placerat posuere enim. Sed urna felis, fermentum a tellus ac, vehicula rutrum dolor. Vivamus sodales tempor interdum. Aenean a lectus ut elit viverra efficitur.

Nulla ut orci commodo lacus laoreet pretium et eget lectus. Phasellus dignissim justo sed elit dictum, eu mollis ligula imperdiet. Donec nec condimentum ante. Aliquam accumsan est quis enim porta consectetur. Etiam fringilla accumsan elit nec posuere. Sed malesuada ullamcorper euismod. Nullam at purus eget lectus mollis ullamcorper quis sit amet neque. Suspendisse aliquam lacus in bibendum aliquam. Duis porta ligula eu ante dapibus maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus placerat suscipit ligula, a viverra est cursus nec.
    </div>
</body>=

Flexbox offers a solution to this.

EDIT: The full code is below. It needed to have some elements rearranged, and a container element needed to separate content from the header.

*{
    margin: 0;
    padding: 0;
}

body{
    
    background: url(http://eternia.wdagroup.org/img/background2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-left: 20px;
    margin-right: 20px;
}

#content {
    display: flex;
}


#header{
    width: 100%;
    height: 120px;
    color: blue;
    font: 50px Arial;
    text-align: center;
    padding-top: 20px;
}
#title{
    float: top;
    
}
#logo{
    margin-left: 10px;
    margin-top: 5px;
    height: 96px;
    width: 100px;
    float: left;
    background: url(http://eternia.wdagroup.org/img/logo.png);
    
}
/*side menu stuff*/
#menuwrapper{
    font-size: 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-left: 2px solid goldenrod;
    border-top: 2px solid goldenrod;
    border-bottom: 2px solid goldenrod;
    float:left;
    background-color: rgba(0,0,0,0.7);;
    width: 15%;
    min-height: 800px;
    
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    
    border-bottom:solid 2px gray;
    width:100%;
    height: 40px;
    padding-top: 10px;
    cursor:pointer;
}
/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:gray;
    position:relative;
}
/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
    border: 1px solid gray;
    background-color: rgba(0,0,0,0.9);;
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:100%;
    top:0px;
    display:block;
}
/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:gray;
    
  
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:white;
    display:inline-block;
    width:120px;
}

/*end of side menu stuff*/
#main{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-right: 2px solid goldenrod;
    border-top: 2px solid goldenrod;
    border-bottom: 2px solid goldenrod;
    float: right;
    width: 85%;
    min-height: 800px;
    background-color: rgba(0,0,0,0.7);;
    color: white;
    padding: 2% 2% 2% 2%;
    
    
}
/*Start of Wiki Page CSS*/

#firstHeading{

    font: 30px bold;
    border-bottom: 2px solid white;
    margin-bottom: 2%;
}
/*start of right side*/
#rightSideInfo{
    float: right;
    width: 20%;
    border: 2px solid gray;   
}
#rightSideInfo ul li{
    list-style: none;
    margin-left: 5%;
}
#mainImage{
    display: block;
    margin: 0 auto;
    max-width:90%;
    max-height:90%;
    border: 3px solid rgba(155,155,155, .5);
}


#rightTitle{
    font: 20px bold;
    text-decoration: underline;
    text-align: center;
}

#belowTitle{
    font: 18px italic;
    text-align: center;
    text-decoration: underline;
    background: grey;
    opacity: 0.7;
    margin: 2%;
    
}
/*end of right side*/
/*start of content*/
.content{
    
    
    width: 17%;
    height: 15%;
    padding-bottom: 5%;
    
}

.content ul li{
    padding-left: 50%;
    padding-top: 20%;
    list-style: none;
    font-size: 13px;
    
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
#contentWrapper{
    margin-top: 10%;
    background: rgba(155,155,155, .6);
    width: 15%;
    border: 2px solid rgba(155,155,155, .7);
    
}
#hideBtn{
    text-decoration: none;
    font-size: 11px;
    color: cyan; opacity: 0.8;
}
/* Toggled State */
input[type=checkbox]:checked ~ .content{
   display: none;
   
}

/*end of content*/

/*start of main article*/
#paragraphWrapper{
    margin-top: 5%;
    
}
#paragraphWrapper h1{
    text-decoration: underline;
    font-size: 18px;
    padding-top: 3%;
}
    <body>
		
        <form id="header">
            <a href="#" id="logo"></a>
            
            
        </form>
        
        
        <div id="content">
        <div id="menuwrapper">
            <ul>
                <li><img src="http://eternia.wdagroup.org/img/test1.png" alt="Smiley face" height="22" width="22"><a href="index.html">Home</a></li>
                <li><a href="#">Maps</a>
                    <ul>
                        <li><a href="#">Product 1</a></li>
                        <li><a href="#">Product 2</a></li>
                        <li><a href="#">Product 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Characters</a>
                    <ul>
                        <li><a href="#">Faqs</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Where are we?</a></li>
                    </ul>
                </li>
                <li><a href="#">Magic</a>
            </ul>
        </div>
        <div id="main">
            <h1 id="firstHeading">Page Title</h1>
            <p>Hello123 this is a paragraph</p>
            
            <div id="rightSideInfo">
                <h1 id="rightTitle">Name</h1>
                
                <h1 id="belowTitle">some things</h1>
                <ul>
                    <li>Reign:</li>
                    <li>Born:</li>
                    <li>Full Name:</li>
                    <li>Father:</li>
                    <li>Mother:</li>
                    <li>Siblings:</li>

                </ul>

            </div>
            <div id="contentWrapper">
                
                <a id="contentBtn">Contents<label id="hideBtn" for="toggle-1">  [hide] </label></a>
                <input type="checkbox" id="toggle-1">
                <div class="content">
                    <ul>
                        <li><a href="#first">first</a></li>
                        <li><a href="#second">second</a></li>
                        <li><a href="#third">third</a></li>
                        <li><a href="#fourth">fourth</a></li>
                    </ul>

                </div>
            </div>
            
            <div id="paragraphWrapper">
                <h1 id="first">First Paragraph</h1>
                <p>Some info on the first paragraph</p>
                <h1 id="second">Second Paragraph</h1>
                <p>Some info on the second paragraph</p>
                <h1 id="third">Third Paragraph</h1>
                <p>Some info on the third paragraph</p>
                <h1 id="fourth">Fourth Paragraph</h1>
                <p>Some info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraphSome info on the fourth paragraph</p>
            </div>
            </div>
        </div>
        
       
    </body>