0

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.

11
  • Could you explain why you're trying to do this? I don't see the purpose from the image
    – Ian Clark
    Commented Jan 18, 2014 at 12:16
  • set all their floats to left. Also, make sure their width is less than or equal to the wrapping div
    – Atieh
    Commented Jan 18, 2014 at 12:17
  • 1
    Why are you semantically separating 2 elements that according to their rendering are joined? Commented Jan 18, 2014 at 12:19
  • are you trying to do a paralax or sprite design? what is it do you want to do? Commented Jan 18, 2014 at 12:19
  • what's inside left and right divs? are those divs empty? you only want them to extend the background?
    – arieljuod
    Commented Jan 18, 2014 at 12:20

5 Answers 5

3

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>
0

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>
0

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>
5
  • 1
    1) Could you please provide a fiddle to show how this works and 2) I don't see how this achieves what the OP asked for.
    – Ian Clark
    Commented Jan 18, 2014 at 13:17
  • 1. Copy the code and paste it in notepad. 2. save it somewhere. 3. pull it up on a browser. Then you will see it is exactly what he asked. Commented Jan 18, 2014 at 13:34
  • 1
    I've added your code to JSFiddle Lesly, but it doesn't fix their issue.
    – Ian Clark
    Commented Jan 18, 2014 at 14:01
  • I'm not going to sit here in explain each line of code. This is simple css and html. Commented Jan 18, 2014 at 14:02
  • 1
    This site is about helping people, if your code doesn't answer the question, then yes you should try to explain what you were trying to achieve
    – Ian Clark
    Commented Jan 18, 2014 at 14:05
0

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;
}
3
  • That's what I need, but this solution not supported by the last version of popular web browsers? Do you know other solution to do this?
    – Matrinkoo
    Commented Jan 18, 2014 at 12:48
  • Nothing else really sprang to mind other than using JavaScript to reposition the left and right DIVs. That was why I asked you what the purpose of this was. I'm also not sure what you mean by "but this solution not supported by the last version of popular web browsers". It is supported for the latest versions of all of the popular web browsers, just notably not IE<11 (/10 without -ms-)
    – Ian Clark
    Commented Jan 18, 2014 at 13:08
  • check out my answer. I just re-arranged your divs. Commented Jan 18, 2014 at 13:12
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.