CODEWITHSUNDEEP
htmlcsswidth
aleixrav
aleixrav

Reputation: 214

Parent div with margin and with auto and child with 100% do not fill full width

What I would like to do is to create a menu which fills all width but some margin at left and right. This is the structure:

<div class="parent">
    <div class="content">
        <div class="element">
            <a><p>Text1</p></a>
        </div>
        <div class="element">
            <a><p>Text2</p></a>
        </div>
        <div class="element"> 
            <a><p>Text3</p></a>
        </div>
        <div class="element">
            <a><p>Text4</p></a>
        </div>
    </div>
</div>

And this is the css:

.parent
{
    width:100%;
    float:left;
}
.content
{
    width:auto;
    margin:0 20px;
    float:left;
    border-top:1px solid;
    border-left:1px solid;
    border-right:1px solid;
}
.element
{
    width:100%;
    float:left
}
.element a
{
    width:auto;
    padding:10px;
    border-bottom:1px solid;
    text-align:center;
    display:block;
}

The structure would be the full div and margins on left and right but the div itself with borders has to fill the other part of the page

Here is the example: jsfiddle

Upvotes: 0

Views: 1724

Answers (1)

Paweł
Paweł

Reputation: 1316

First of all remove float:left; from .parent, .content and .element elements. It gonna make everything 100% wide. Actually you don't need styling for .element at all, at least for what you asked for.

You already have some margin on the left and right of .content, so you don't need to change anything here.

.content {
  margin: 0 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
}
.element a {
  padding: 10px;
  border-bottom: 1px solid;
  text-align: center;
  display: block;
}
<div class="parent">
  <div class="content">
    <div class="element">
      <a>
        <p>Text1</p>
      </a>
    </div>
    <div class="element">
      <a>
        <p>Text2</p>
      </a>
    </div>
    <div class="element">
      <a>
        <p>Text3</p>
      </a>
    </div>
    <div class="element">
      <a>
        <p>Text4</p>
      </a>
    </div>
  </div>
</div>

(I also removed width: auto; from .content element as it's not needed)

Upvotes: 1

Related Questions