CODEWITHSUNDEEP
htmlcss
Evanss
Evanss

Reputation: 23593

Horizontally aligned divs in liquid layout - background of one extends behind other

I have a liquid layout. I need 2 divs to be next to each other horizontally and take up the full available width. The 2nd div needs to be the width of its content, so the 1st div should take up the rest of the space.

Here is my attempt: http://jsfiddle.net/jamesbrighton/N2prR/2/

Its working except that the background of #other extends behind #button. Im my actual site #other also has a background image set to its right. This means that I need the background colour and image to only extend up to #button, not beyond it. Thanks

Upvotes: 2

Views: 194

Answers (2)

verisimilitude
verisimilitude

Reputation: 5108

<style>
#other {
    background-color: blue;
width: 40%;
}
#button {
   background-color: gold;
   float: right;
   border-radius: 10px;
   width: 60%; 
}
.clear{
   clear: both;
}


<div id="parent"> 
 <div id="button">
    Submit Submit Submit Submit Submit Submit Submit Submit Submit Submit
 </div> 
 <div id="other"> 
   Some other content
 </div>
<div class="clear"></div>
</div>

Mandatory for you to give the 1st <div> some fixed with in percentage. The text in the second will wrap automatically.

Upvotes: 1

Igal Zeifman
Igal Zeifman

Reputation: 1146

1st of all both divs should be floated. (if not they are exist in different "layers" and overlaps)

As to the auto width thing, I don`t think you can do it that easily just with html. In my experience its always better to work with set width/height with divs.

If you want you can use a 2 td table (one with set to 100% width, the other to set width - e.g. 200px)

Good luck

Upvotes: 1

Related Questions