CODEWITHSUNDEEP
htmlcss
Matrinkoo
Matrinkoo

Reputation: 17

3 DIV in one row

I need three <div> elements in one row.

Example:

<div class="row">

    <div class="left">
         <!-- width 100% , float:left  -->
    </div>

    <div class="center">
         <!-- width 960px , margin:0 auto  -->

         <div class="sidebar">
              <!-- width 350px , float:right  -->
         </div>

    </div>

    <div class="right">
         <!-- width 100% , float:right  -->
    </div>

</div>

Example image: enter image description here

I want to set the same background for div.right as div.sidebar.

Upvotes: 0

Views: 18158

Answers (5)

Kris1
Kris1

Reputation: 197

here you go 3 DIV in one row Click on Run code snippet to see the result 

<div id="d3" style="display:inline-block; width:100px;">content1</div>
<div id="d3" style="display:inline-block; width:100px;">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>

<div id="d1" style="display:inline-block; width:100px;">**content1**</div>
<div id="d1" style="display:inline-block; width:100px;">**content1**</div>
<div id="d3" style="display:inline-block; width:100px;">**content3**</div>

Upvotes: 0

Ian Clark
Ian Clark

Reputation: 9347

Solution 1 - CSS Calc

JSFiddle. This solution uses the calc() CSS3 function. This is supported by all major browsers, notably going back to IE9.

HTML

<div id="container" class="cf">
    <div id="left" class="side"></div>
    <div id="center"></div>
    <div id="right" class="side"></div>
</div>

CSS

#container div {
    height:300px;
    float:left;
}
#center {
    width:960px;
    background:#FFFF00;
}
.side {
    width:calc(50% - 480px);
    background:#FF0000;
}

(Note: Because this solution requires floats I've also included the micro clearfix hack)

Solution 2 - Flexbox

JSFiddle. This technique uses the CSS3 flexbox model. Browser compatibility aside this is my favoured approach, but this isn't a good solution if you want to target legacy browsers.

HTML

<div id="wrapper">
    <div id="left" class="flex"></div>
    <div id="center"></div>
    <div id="right" class="flex"></div>
</div>

CSS

#wrapper {
    display:flex;
}
#wrapper div {
    height:300px;
}
.flex {
    flex:1;
}
#center {
    width:960px;
}

Upvotes: 0

Lesly Revenge
Lesly Revenge

Reputation: 922

I basicly did it for you. JSFiddle

            <html>
            <head>
            <style>

            #row{
            background: grey;
            width: 100%;
            margin: 0;
            float: left;
            }
            #left {
            background: #ccc;
            width: 60%;
            float: left;
            }
            #right{
            background: #999;
            width: 40%;
            float: right;

            }

            #content-left{
                width: 70%;
                float: right;
            }
            #right-top-wrapper{
            width: 100%;
            background: #666;
                color: #f3f3f3;
                float: left;
            }
            #right-top{
                width: 40%;

                clear: both;

            }
            #right-bottom{
                width: 40%;
                float: left;
                clear: both;
            }


            </style>
            </head>
            <body>
            <div id="row">
            <div id="left">
                <div id="content-left">
                <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru
                </div>
            </div>
            <div id="right">
                <div id="right-top-wrapper">
                    <div id="right-top">
                    <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, co
                </div>
                </div>
                <div id="right-bottom">

                <h3>Lorem Ipsum</h3>
                    "Lorem ipsum dolor sit amet, co
                </div>
            </div>
            </div>
            </body>
            <html>

Upvotes: 0

joker
joker

Reputation: 990

css file 

 .main{ background-color: #ddd;}
.left {

    display: table-cell;
}
.middle {

    display: table-cell;
    width:100%;
}
.right {

    display: table-cell;
}

html code

<div class="main">
<div class="left"> Some content </div>
<div class="middle"> This should fill the space left </div>
<div class="right"> Some other content </div>
</div>

Upvotes: 3

Shhade Slman
Shhade Slman

Reputation: 248

Use inline style on displaying the divs :

style="display:inline"

<div class="row">

<div style="display:inline" class="left">
     <!-- width 100% , float:left  -->
</div>

<div style="display:inline" class="center">
     <!-- width 960px , margin:0 auto  -->

     <div style="display:inline" `class="sidebar">
          <!-- width 350px , float:right  -->
     </div>

  </div>

  <div class="right">
     <!-- width 100% , float:right  -->
  </div>

  </div>

Upvotes: 0

Related Questions