CODEWITHSUNDEEP
htmlcsslayout
user3470887
user3470887

Reputation:

Specific Layout With DIV's

I have a a webpage that currently has a navigation bar on the top. I have been trying to create a layout underneath the navigation bar such as this:

Layout

Now left will be a "button" but really just a DIV that will be used to do something. Only one of the "Right" placeholders will actually contain text and the rest will be blank.

My issue is that I am not able to create this layout as I have in the picture. The closest I get is each "row" of left and right with now spacing between them.

Currently I have this for my code:

<!doctype html>
<html lang=''>

<head>

  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Josh Schweigert - Contact</title>

  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <script src="contact.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="contact.css">

</head>


<body>

  <div id="cssmenu">

    <ul>

      <li><a href="index.html" target="_self">Home</a>
      </li>
      <li><a href="embedded.html">Embedded Systems</a>
      </li>
      <li class="active"><a href="#">Contact</a>
      </li>

    </ul>

  </div>


</body>

</html>

Note that the formatting will be screwed up as I did not include the CSS code.

I have tried making an "outter" div and inside that div have "container" div's which then hold a div for "left" and a div for "right" sort of like this:

#outter {
  Position: Relative;
}
.container {
  position: relative;
}
.left {
  float: left;
  width: 30%;
}
.right {
  float: left;
  width: 70%;
}
<div id="outter">
  <div class="container">
    <div class="left">
      left
    </div>

    <div class="right">
      right
    </div>
  </div>

  <div class="container">
    <div class="left">
      left
    </div>

    <div class="right">
      right
    </div>
  </div>

  <div class="container">
    <div class="left">
      left
    </div>

    <div class="right">
      right
    </div>
  </div>

</div>

But I am still not getting the result I want and I am thoroughly confused on how to achieve this layout. I appreciate any help!

Upvotes: 0

Views: 96

Answers (4)

Ebuzer Taha KANAT
Ebuzer Taha KANAT

Reputation: 933

Try this:

      <div class="container">
        <div class="left">
          left
        </div>
<!--Remove this space -->    
        <div class="right">
          right
        </div>
      </div>

Upvotes: 0

nashcheez
nashcheez

Reputation: 5183

Please get your HTML structure correct to begin with. Also I made changes to your code to get the alignment you require here.

You need something like this:

.navbar {
  background-color: #5983ff;
  height: 35px;
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
}
.navbar-child {
  width: 30%;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  line-height: 35px;
}
.container {
  margin-bottom: 15px;
  height: 30px;
  line-height: 30px;
  border:2px solid #dd00ff;
}
.left {
  float: left;
  padding-left: 20px;
  width: 15%;
  color: #fff;
  background-color: #dd00ff;
  box-sizing: border-box;
}
.right {
  float: left;
  padding-left: 50px;
  width: 85%;
  color: #fff;
  background-color: #ff0000;
  box-sizing: border-box;
}
<div class="navbar">
  <div class="navbar-child">
    Home
  </div>
  <div class="navbar-child">
    About
  </div>
  <div class="navbar-child">
    Contact
  </div>
</div>

<div class="body-section">
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="container">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>

</div>

Upvotes: 1

Ced
Ced

Reputation: 17327

You could use flex with box-sizing: border-box:

    .wrap{
      display: flex;
      flex-wrap: wrap;
      }

    nav, section, aside{
        padding: 0.5rem;
      }

    nav{
      width: 100%;
      background: yellowgreen;
      display:flex;
      justify-content: space-around;
      }


    aside{
      width: 30%;
      background: blueviolet;
      box-sizing: border-box;
    }

    section{
      min-width: 70%;
      background: pink;
      box-sizing: border-box;
    }
    <div class="wrap">
    <nav> 
        <div>Home</div>
        <div>Forum</div>
        <div>Contact</div>
    </nav>
      
        <aside>left</aside>
        <section>right</section>
        <aside>left</aside>
        <section>right</section>
        <aside>left</aside>
         <section>right</section>
      
    </div>

width: 100% gives the nav full width, flex warp let other items under it, box-sizing lets you give the exact width for left and right

You can read more on flex here.

Also a post of mine that might help you understand

Upvotes: 0

Anthony Manning-Franklin
Anthony Manning-Franklin

Reputation: 5008

I achieved this by making the following changes to your code:

  • Removed unnecessary position: relative; statements. They weren't doing anything in this context.
  • Removed floats
  • Changed .left and .right to display: inline-block;
  • Removed whitespace between divs as inline block is whitespace sensitive.

However this mightn't be the best solution because it's very unclear what your end goal is. If the idea is for the left column to be a vertical navbar then you would want that contained in its own element, and the main content in another. But again, it's not clear what the intent of the design is so I did it in as few changes as possible.

The box-sizing and other styles are just prettification so you can see that the code does lay out as specified in your image.

div {
  box-sizing: border-box;
}

.left
{
  width: 30%;
  display: inline-block;
  background-color: purple;
  color: #fff;
  padding: 15px;
} 
.right
{
  width: 70%;
  display: inline-block;
  background-color: red;
  color: #fff;
  padding: 15px;
}
<div id="outter">
  <div class="container">
    <div class="left">
      left
    </div><div class="right">
      right
    </div>
  </div>
  
  <div class="container">
    <div class="left">
      left
    </div><div class="right">
      right
    </div>
  </div>
  
  <div class="container">
    <div class="left">
      left
    </div><div class="right">
      right
    </div>
  </div>
  
</div>

Upvotes: 1

Related Questions