CODEWITHSUNDEEP
htmlcss
artyomavanesov
artyomavanesov

Reputation: 23

Spread our elements over parent width

I'm trying to spread out 3 elements over the width of the screen. I've tried different methods but when I use inline-block the second element doesn't center. When I leave out inline-block the third element shows on the next line. Any suggestions?

<html>
<head>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .base {
            display: block;
            height: 200px;
            background-color: #eeeeee;
        }
        .container {
        }
        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        .container {
        }
        #left {
            float: left;
        }
        #center {
            margin: auto;
        }
        #right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="base">
        <div class="container">
            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 291

Answers (2)

Dinesh undefined
Dinesh undefined

Reputation: 5546

I would suggest you to use display:flex;

<html>
<head>
    <style>
        .base {
          
            height: 200px;
            background-color: #eeeeee;
            display:flex;
            justify-content:space-between;
           
        }

        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
             align-self: flex-end;
        }
 
    </style>
</head>
<body>
    <div class="base">

            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        
    </div>
</body>
</html>

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56555

You can use the below CSS3 to do this.

* {
            margin: 0px;
            padding: 0px;
        }
        .base {
            display: block;
            height: 200px;
            background-color: #eeeeee;
        }
        .container {
        }
        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        .container {
        display:flex;
        justify-content:space-between;
        }
<div class="base">
        <div class="container">
            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        </div>
    </div>

CSS Solution

* {
            margin: 0px;
            padding: 0px;
        }
        .base {
            display: block;
            height: 200px;
            background-color: #eeeeee;
        }
        .container {
        }
        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        .container {
          display:block;
          text-align:center;
        }
        #left{
          float:left;
        }
        #right{
          float:right;
        }
        #center{
          display:inline-block;
        }
<div class="base">
        <div class="container">
            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        </div>
    </div>

Upvotes: 1

Related Questions