Algirdas DabaĊĦinskas Algirdas DabaĊĦinskas - 4 years ago 116
CSS Question

How to using only divs tags and css

I'm pretty new to HTML and CSS so perhaps this is a crazy easy question to answer.

The question is:
How to do this using only divs and css?

I don't want to use

<table> <tr> <th> <td>....


Header

Roy Roy
Answer Source

Here's a basic setup of what you're asking using the flexbox property.

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Read more about it at MDN and experiment with it so you feel comfortable using it. The setup might not be pixel perfect, but it gives you a good start for the desired layout. Trial and error, that's the best way to learn.

div {
  box-sizing: border-box;
  border: 1px solid black;
  min-height: 20px;
}

.container {
  display: flex;
  flex-flow: row-wrap;
  width: 100%;
}

.column {
  flex: 1 1 100%;
}

.middle {
  flex-basis: 200%;
}

.middle-top,
.right-top,
.right-bottom {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.language,
.search,
.login,
.signup,
.some-text,
.avatar {
  flex: 1 1 50%;
}
<div class="container">

  <div class="column left">
    <div class="social">
      Social icons
    </div>
    <div class="logo">
      Logo
    </div>
  </div>
  <div class="column middle">
    <div class="middle-top">
      <div class="language">
        Language
      </div>
      <div class="search">
        Search
      </div>
    </div>
    <div class="slogan">
      Slogan
    </div>
    <div class="menu">
      Menu
    </div>
  </div>
  <div class="column right">
    <div class="right-top">
      <div class="login">
        Login
      </div>
      <div class="signup">
        Signup
      </div>
    </div>
    <div class="right-middle">
      Welcome guest
    </div>
    <div class="right-bottom">
      <div class="some-text">
        <div class="something">
          Some text
        </div>
        <div class="something">
          Some text
        </div>
      </div>
      <div class="avatar">
        Avatar
      </div>
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download