Guren Guren - 1 month ago 8
CSS Question

Divs inside of wrapper div are not aligning properly

I need to know why I cannot get my sidebar inside of my wrapper div to stay on the right and my main_content div to stay on the left side of my wrapper.
I would like the following model:

WRAPPER DIV:
______________________________
{ / sidebar }
{ / div }
{ m_c div / }
{ / }
{ __________________/__________}


1) What code am I missing that does not let me align the divs inside of the wrapper?

2) Also, I drew a border around each div so that I can visualize them with ease; now why is my main_content div disappear whenever it comes across text? If you run it in fiddle you can see what i'm talking about. There are holes in the border near the text; how can I make that disappear?

Thank you.



/*Comment example - created 10/12/16*/

* {
font-family: 'Libre Franklin', sans-serif;
background-color: rgb(155, 155, 155);
}

.wrapper { /*black*/
width:960px;
min-height: 700px;
border: 1px solid rgb(0,0,0);
margin: 0 auto;
display:inline-block;
}

.main_content{ /*Green*/
width: 730px;
min-height: inherit;
border: 2px solid rgb(222, 26, 26);
float:left;

}

.sidebar_one{ /*White*/
width: 230px;
min-height:inherit;
border: 1px solid rgb(255,255,255);
float:right;
position:absolute;
color:rgb(242, 70, 16);
overflow:hidden;
}

h2 {
position:relative;
left:5px;
}

h5 {
position:relative;
left:5px;
}

p {
position:relative;
left:5px;
}

<!DOCTYPE html>
<!--Created 10/12/16 ///// ideas: emrisk-->
<html>
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/> <!--Added external Stylesheet-->
<script src="script.js"></script> <!--Added external javascript file-->
</head>
<body>
<div class="wrapper">
<div class="main_content">
<h2>TEST
</h2><!-- END OF H2 -->
<h5>random test
standard of web-based and cloud-based server
systems since 2007.
</h5> <!-- END OF H5 -->
<p>
Our clients have trusted our team for
almost a decade and throughout the years we
have proven our worth over and over again.
</p> <!-- END OF P -->
</div> <!-- END OF MAIN_CONTENT -->
<div class="sidebar_one">
Test
</div><!-- END OF SIDEBAR_ONE -->
</div> <!-- END OF wrapper -->

</body>

</html>





Thank you.

Answer

Remove position:absolute from below and decrease the width of sidebar_one:-

.sidebar_one{ /*White*/
  width: 210px;
  min-height:inherit;
  border: 1px solid rgb(255,255,255);
  float:right;

  color:rgb(242, 70, 16);
  overflow:hidden;
}
Comments