Geek asks and answers

Simple qst about CSS, px and percentage width! [with image]

I have this little problem: enter image description here

How to set the width in the second field to fill the entire space by counting with an orange field?

thank

HTML:

 <div class="parent"><div class="orange"></div><div class="blue"></div></div>

CSS:

 .parent{width:100%;} .orange{width:100px;}

Orange and blue boxes should be the same, even if they vary in size from page to page, a pixel is ideal whenever possible.

+3
source share
1 answer

The simplest solution uses this markup:

<div class="complete">
  <div class="orange"></div>
  <div class="blue"></div>
</div>

Do you want to .completeand .blueare unlockable block elements that causes them to be used as much as possible the width, but you also need .orangeto swim, to be on the same line as the .blueand prevent .bluethe overlap it with the help of a hidden overflow.

.complete { overflow : hidden }
.orange   { float : left ; width : 100px }
.blue     { overflow : hidden }

, .

, . (, ), , CSS.

+4

More articles:


All Articles