Home > DeveloperSection > Forums > floating div 100% width
Tanuj Kumar

Total Post:134

Points:940
Posted on    December-28-2012 8:01 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1318  View(s)
Rate this:
Hi every one

I'm using the Foundation framework and I want to make a navigation which takes 100% width of the grid class.

I have 3 divs: .header_beg, .header_rep, .header_end

 

.header_beg is 2px width, float: left and the .header_end also

 

But I want header_rep to be 1px width and to repeat-x till it fills 100% of the grid class. But it also need it to be float: left, but with float: left it's not visible. I haven't set width because I want it to be 100% of the grid class.

 

background: red;

height: 49px;

margin-left: 2px;

 

I need the green divs to be at the beginning and at the end of the red one, and simultaneously the 3 divs to be 100% width of the grid class.

 Thanks in advanced



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    December-28-2012 9:38 AM

Hi Tanuj Kumar

You sould try below code

<div id="div1">
<div id="div2">
    <div id="left"></div>
    <div id="right"></div>
</div>
</div>

css:

#div1 {display:table;width:600px;height:30px;}
#div2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}

important there is no floating! because the table display floats the cells automatically. i didnt test the code hope works.

Modified On Dec-28-2012 09:39:16 AM

Don't want to miss updates? Please click the below button!

Follow MindStick