---
title: "floating div 100% width"  
description: "floating div 100% width"  
author: "Anonymous User"  
published: 2012-12-28  
updated: 2012-12-28  
canonical: https://www.mindstick.com/forum/516/floating-div-100-width  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# floating div 100% width

Hi every one \
\

I'm using the [Foundation](https://www.mindstick.com/articles/157275/passed-peoplecert-it-infrastructure-library-itil-4-foundation-exam-today) [framework](https://www.mindstick.com/forum/34615/software-framework-vs-library) and I want to make a [navigation](https://www.mindstick.com/blog/62/different-navigation-in-asp-dot-net) which takes 100% width of the [grid](https://www.mindstick.com/forum/369/how-can-i-add-a-column-name-to-my-grid) class.

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

.header_beg is 2px width, [float](https://www.mindstick.com/interview/1718/describe-float-containment): [left](https://www.mindstick.com/articles/12768/don-t-be-left-behind-with-the-new-it-revolution) and the .header_end also

But I want header_rep to be 1px width and to [repeat](https://www.mindstick.com/forum/156775/give-an-example-of-the-linq-repeat-method)-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](https://www.mindstick.com/articles/95829/think-green-sustainable-design-considerations-for-commercial-buildings) divs to be at the beginning and at the end of the [red](https://yourviews.mindstick.com/view/81343/lonar-lake-turning-red-again) one, and simultaneously the 3 divs to be 100% width of the grid class.

Thanks in [advanced](https://www.mindstick.com/articles/12993/5-advanced-features-for-your-odoo-ecommerce-theme)

## Replies

### Reply by AVADHESH PATEL

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.


---

Original Source: https://www.mindstick.com/forum/516/floating-div-100-width

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.