CODEWITHSUNDEEP
htmlcss
Undefined Variable
Undefined Variable

Reputation: 4267

How to create two divs side-by-side with one extending till page width?

What I need is two divs in following fashion:

[-width-of-content-][------------------remaining-width-of-page----------------------------]

I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!

<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>

Upvotes: 3

Views: 528

Answers (6)

Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

Not sure if I'm understanding you correctly, but I think you're trying to get this:

HTML:

<div class="right">Text goes here</div>
<div class="left">Text for the left div goes here</div>

CSS:

.right {
    float:right;
    background: #ddd;
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.left {
    background-color:#ccc;
    height: 100px;
    }

fiddle: http://jsfiddle.net/veW2z/88/

Upvotes: 0

Mr Trix
Mr Trix

Reputation: 1

Actually,"col-md-" are the classes of Bootstrap ..u need to include the Bootstrap css to make it work..Here is the link for itenter link description here

           This contain complete Bootstrap but u need to include only the css in it and write the code

Upvotes: -1

Eric Guan
Eric Guan

Reputation: 15992

You only need to float the left element.

HTML

<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>

CSS

#left,#right{
    height:50px;
}

#left{
    background:red;
    float:left;
}

#right{
    background:green;
}

https://jsfiddle.net/qb3374ou/

EDIT: right div with content.. same result https://jsfiddle.net/qb3374ou/1/

Upvotes: 2

treb
treb

Reputation: 548

Sorry bro,.. my mistake... this one is more working :

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">Width of content</div>
        <div class="col-sm-8" style="background-color:lavenderblush;">Remaining Pages</div>
      </div>
    </div>

    </body>
    </html>

Upvotes: 0

bags
bags

Reputation: 1066

You could also achieve this using flexbox: http://jsfiddle.net/yr05wkuh/1/

This would keep your DIVs the same height, without requiring you to set a value.

CSS

.container {
    display: flex;
}

.div1{
    background-color:yellow;
}

.div2{
    flex: 1 0;
    background-color: red;
}

HTML

<div class="container">
    <div class="div1"> Hello</div>
    <div class="div2"> THIS DIV BREAKS</div>
</div>

Here's a good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

treb
treb

Reputation: 548

two divs side-by-side is impossible but this might work:

                        <div class="row">
                           <div class="col-md-10 col-md-offset-1">
                               width of content
                                <div class="col-sm-9">
                                     Remaining width of page
                                </div>
                           </div>
                        </div>

hope it helped.. .

Upvotes: 0

Related Questions