CODEWITHSUNDEEP
htmlcssalignment
relentless-coder
relentless-coder

Reputation: 1546

Aligning the content inside the two floated divs. Spacing issues

before I go ahead, please read the complete question details before tagging this question as a duplicate.

I've searched the whole StackOverflow, and have spent more than 5 hours on gitter, and haven't been able to solve this problem.

#container {
    max-width: 50%;
    margin: 5% auto;
    border: 5px solid black;
}

#container:after {
    content: " ";
    height: 0;
    display: block;
    clear: both;
}

#doin, #rgb {
    max-width: 100%;
}

#doin:hover {
    background: blue;
    color: white;
}

#left {
    float: left;
    max-width: 30%;
}

#right {
    max-width: 70%;
    float: left;
}

.doin, .rgb {
    max-width: 96%;
    display: block;
    margin: 2% auto;
}
<!DOCTYPE html>
<html>
<head>
    <title>Ayush Bahuguna | Work</title>
    <link rel="stylesheet" type="text/css" href="assets/css/work.css">
</head>
<body>
<div id="header"><h1>Projects</h1></div>
<div id="container">
    <nav id="left">
        <ul>
            <li id="doin">Doinmin</li>
            <li id="rgb">Guess The RGB</li>
        </ul>
    </nav>

    <div id="right">
        <img src="assets/img/doinmin.png" class="doin"><p class="doin" id="dpara">This project started as a basic to-do app, but along the way I turned it into something that I use while practicing a musical instrument. The app can be used to deal with big tasks that can be broken down into smaller tasks, with each task being dealt with for a certain amount of time. It prevents you from getting overwhelmed. The app is built using HTML5, CSS3, and jQuery.</p>
        <img src="assets/img/rgb.png" class="rgb"><p class="rgb" id="rpara">This is the second major project that I undertook while learning JavaScript. The code relies heavily on functional programming, particularly, the use of higher order functions. A random rgb(x, y, z) is generated, and one has to guess the correct color out of the 6, under hard level, or 3, under easy level, colors. </p>
    </div>  
</div>
<div id="clear"></div>
<script type="text/javascript" src="assets/js/work.js"></script>
</body>
</html>

let me explain what I am trying to achieve: https://docs.google.com/drawings/d/1DvQIzW74lRTZHJCdPh-VBkGv4OXIIqtVxEJRp3S-mk4/edit

The content inside my two floated divs is really messed up.I am trying to increase the width of my left div, but it doesn't affect its width, and the right div shifts further towards left, increasing the white space on the right.

What I really want is to have my nav items take up the whole space, which they do, but I am not able to increase the width.

Moreover, I want the content on the right to be vertically aligned in the middle.

I tried inline-block, but the content in the left div got pushed down to the bottom. If you guys think that using inline-block would be a better idea, then please guide me with that.

Thank You

Upvotes: 0

Views: 29

Answers (1)

Obink
Obink

Reputation: 329

so the summary, what do u want to achieve is nav in the left and content in the right. and a content it self are vertical align middle. and i dont remember if it should be horizontally center.

  1. forget about the float:left
  2. use flex from the start, you can find it in here all about flex
  3. see my code
  4. if you like it, delete your code and adapt with mine

.wrap{
width:100%;
height:300px;
display:flex;
align-items:center;
justify-content:center;}

.wrapception{
width:75%;
height:100%;
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}

nav{
background:yellow;
width:30%;
height:100%;}

section{
background:red;
width:70%;
height:100%;
display:flex;
align-items:center;}
<body>
<h1>Projects</h1>
<div class="wrap">
<div class="wrapception">
  <nav>asdasd</nav>
  <section>asdasdsad</section>
</div>
</div>
</body>

Upvotes: 1

Related Questions