CODEWITHSUNDEEP
htmlcss
Heetola
Heetola

Reputation: 6181

div block placement in HTML/CSS

I made this demo: https://jsfiddle.net/qtpsqchq/1/

Code snippet:

#dashboardHeader {
  color: white;
  background-color: #42637B;
  border: 1px solid black;
}
#dashboardTabs {
  margin: 0 auto;
  width: 50%;
}
.dashboardTab {
  color: white;
  background-color: #39556A;
  border: 1px solid black;
  padding-left: 25px;
  padding-right: 25px;
  margin: 3px;
  float: left;
}
<body>
  <title>Dashboard</title>

  <div id="dashboardBox">

    <div id="dashboardHeader">
      <h1 align="center">Dashboard</h1>
    </div>

    <div id="dashboardTabs">
      <div class="dashboardTab">
        <h3>1</h3>
      </div>
      <div class="dashboardTab">
        <h3>2eq</h3>
      </div>
      <div class="dashboardTab">
        <h3>3</h3>
      </div>
    </div>

    <div id="dashboardContent">

    </div>

  </div>

</body>

What I want is to obtain this result : http://s4.postimg.org/x6p45agq4/maquette.jpg

But the block are not being centered like I want them to be, the 3 square should be centered.

An other weird thing, If I put a border around "dashboardTabs" the border does not go around the "dashboardTab" group (notice that I wrote "dashboardTabs" and "dashboardTab").

Why is that?

Thanks.

Upvotes: 0

Views: 193

Answers (2)

Paulie_D
Paulie_D

Reputation: 115011

Flexbox solution which also requires removing the floats.

#dashboardHeader {
  color: white;
  background-color: #42637B;
  border: 1px solid black;
}
#dashboardTabs {
  margin: 0 auto;
  width: 50%;
  display: flex;
  justify-content: center;
  border:2px solid green;
}
.dashboardTab {
  color: white;
  background-color: #39556A;
  border: 3px solid red;
  padding-left: 25px;
  padding-right: 25px;
  margin: 3px;
}
<body>
  <title>Dashboard</title>

  <div id="dashboardBox">

    <div id="dashboardHeader">
      <h1 align="center">Dashboard</h1>
    </div>

    <div id="dashboardTabs">
      <div class="dashboardTab">
        <h3>1</h3>
      </div>
      <div class="dashboardTab">
        <h3>2</h3>
      </div>
      <div class="dashboardTab">
        <h3>3</h3>
      </div>
    </div>

    <div id="dashboardContent">

    </div>

  </div>

</body>

I also accentuated the border so that you can see that it is being applied to the tabs. I also added a border to the tab wrapper for visual reference.

Upvotes: 1

Frankey
Frankey

Reputation: 3757

You could use text-align center on the wrapping div, and set the tab divs as inline-block elements like this:

https://jsfiddle.net/qtpsqchq/3/

#dashboardTabs {    
      width:100%;
      text-align:center; 
 }

.dashboardTab {
     display:inline-block; 
}

With this, the border will appear because we have removed the float property.

Upvotes: 6

Related Questions