I have two divs diva and divb. They have a fixed height of 30px. I want to display them in a single line, one after the other. This can be done by giving them widths of 10% and 90% respectively and by float: left. This works fine. But I gave them a border of 1 px and this disturbs the calculation. I gave the second div a width of 88% and is working. But there is an empty space after that div.
I want both the divs to display in a single line. The page re sizes and I want divs to fill space and so that I can’t give them fixed width. The first div may be given a fixed width, because I just want it 150 px wide. But the second div must be wider to fill space.
What I am getting is this;
and I want this:

Here is the fiddle.
Add a
width: 100%to the body and specifyfloat: left;on div1 and remove thefloat: left;on the div2.If you’re using percentage widths or heights on child elements you have to specify a percentage width or height on the parent or rather container element as well.
That should fix it! 🙂
See this fiddle here
Good luck!