CODEWITHSUNDEEP
htmlcss
chn112
chn112

Reputation: 81

how to position a div, in body with 100% width, with same left and right space?

I have a <div> with position:relativ (doesnt metter here I can set it to absolute as well) I want to place my <div> space on left and right side with 20px but the width: have to be 100%. I am giving my codes and you can see how it seems for now with margin: 0 20px 0 20px

(please dont delete the question, I have already tried the similar question sorry :/ )

->> Second question if should I make a <div> container so it includes everything? or is it cleaver to make how I did?

MY HTML CODE

<body>
<!-- <div class="container"> -->
    <div class="navbar">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">INFO</a></li>
            <li><a href="">ME</a></li>
        </ul>   
    </div>
    <div class="daily">
    </div>
    <div class="aussen">
     ...

MY CSS CODE

body {

    margin: 0px;
    padding: 0px;
    background: #EFEFFB;
    /*overflow-x: hidden;*/
}

.navbar {

    position: absolute;
    width: 100%;
    height: 50px;
    background: grey;
    overflow: hidden;

}

.navbar ul {

    list-style-type: none;
    padding: 0px;
    margin-top: 0px;
    line-height: 50px;
}

.navbar ul li {

    float: left;
    margin-left: 15%;
    padding-left: 1%;
    padding-right: 1%;
    margin-top: 0px;

}


.navbar ul li a {

    color: white;
    text-decoration: none;
}


.navbar ul li:hover {

    background: #585858;

}

.daily {

    position: relative;
    top: 70px;
    height: 110px;
    width: 100%;
    border: 1px solid black;
    margin: 0 20px 0 20px


}

how it looks like now as picture: enter image description here

so the space on left is okay but I want the same on right as well. What is wrong with my code? - accepting suggestions for improvement as well :)

Upvotes: 1

Views: 691

Answers (3)

Enchew
Enchew

Reputation: 1001

Try this:

<div className='daily-container'>
  <div className="daily">
  </div>
</div>

And CSS:

.daily-container {
  padding: 0 20px;
}
.daily {
  position: relative;
  top: 70px;
  height: 110px;
  width: 100%;
  border: 1px solid black;
}

Upvotes: 1

stacks
stacks

Reputation: 359

As easy as that : In your .css file, just remove one thing from .daily class :

width:100%; // remove that and your margin will apply correctly left/right

So your daily class should be like:

.daily {
position: relative;
top: 70px;
height: 110px;
border: 1px solid black;
margin: 0 20px 0 20px;
}

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

Use an inner div and padding on the outer div to achieve what you want:

.daily {
  position: relative;
  top: 70px;
  padding: 0 20px;
}

.inner {
  height: 110px;
  width: 100%;
  border: 1px solid black;
}
<div class="daily">
  <div class="inner"></div>
</div>

Upvotes: 2

Related Questions