CODEWITHSUNDEEP
javascripthtmlcss
poitroae
poitroae

Reputation: 21367

Fill horizontal space

I want the green area here to fill the entire horizontal white area between the green and the blue area. The problem is that I don't know what I should put on it's width attribute, currently it is 500px.

<article id="chat">
</article>
<aside id="channel-attendees">
</aside>

chat is the left bar, channel-attendees the right one.

#chat {
    background: green;
    float: left;
    height: 500px;
    width: 500px;
}

#channel-attendees {
    background: blue;
    float: right;
    width: 200px;
    height: 500px;
}

Upvotes: 1

Views: 94

Answers (3)

Sergey Romanchuk
Sergey Romanchuk

Reputation: 697

If you want the green area to be flexible and blue area with fixed width the you just need to remove float and width from green block, also you need to add margin-right to a green block with value = blue block width.

#chat {
background: green;  
height: 500px;   
margin-right: 200px;
}

And put the blue block before green.

 <body>
  <header>
    <a href="#"><img src="img/icon256.png"></a>
        <div id="menu">
            <div id="user">
                <img id="user-avatar" src="img/avatar.jpg">
                <span id="user-name">Michael</span>
            </div>
        </div>
    </header>
    <div id="channels">
    </div>
    <aside id="channel-attendees">
    </aside><article id="chat">
    </article> 
</body>

Upvotes: 1

Nat
Nat

Reputation: 109

Change the green width, to 90% and change the blue one to float left width 10%,this should then work on all types of monitors ;) 

#chat {
    background: none repeat scroll 0 0 green;
    float: left;
    height: 500px;
    width: 90%;
}


#channel-attendees {
    background: none repeat scroll 0 0 blue;
    float: left;
    height: 500px;
    width: 10%;
}

Upvotes: 1

Matt Dodge
Matt Dodge

Reputation: 11142

Rather than use width try this:

#chat {
  background: green;
  float: left;
  height: 500px;
  position: absolute;
  right: 200px;
  left: 0;
}

Upvotes: 0

Related Questions