how to make 100% width for 2 div

Question

I have 2 div in on page

<div id="main"></div>
<div id="panel"></div>

and using float to make main at left, and panel at right

#photos-main {
float: left;
width: 800px;
position: relative;
}

#panel {
float: left;
margin-left: 830px;
position: absolute;
}

I want to let panel fill with the left page space, which css should I use?

Answer 1

Looks like you're trying to build some layout, right? If that's the case, consider implementing (hence learning from) some of the techniques presented in these links:

40 Tutorials and tips about CSS Layouts

CSS Positioning

The perfect three columns layout

Hope it helps!

Answer 2

Just don't float it, and make it relatively positioned. Take out the margin as well. Floating "main" means that it will simply be to the left of "panel" all the time. If you define "main" how you want, "panel" will automatically take up the remaining space.

#photos-main {
float: left;
width: 800px;
position: relative;
}

#panel {
}

Answer 3

You could do it with floating with this approach:

#photos-main {
 float: left;
 width: 800px;
}

#panel {
 float: right; /*to have the panel on the right side*/
 width: 100px; /*with a width of 100px*/
}

Then you have to wrap the two Tags with another , which get a total width of both elements.

To clarify this two column layout and put e.g. a footer beneath, put another in your HTML-Structure and set into the css simple a "clear:both;", so the floating will be stopped.

Complete Sample

HTML

<div id="wrap">
  <div id="photos-main"></div>
  <div id="panel"></div>
  <div id="clear"></div>
</div>

CSS

#wrap {
 width: 900px;
}

#photos-main {
 float: left;
 width: 800px;
}

#panel {
 float: right; /*to have the panel on the right side*/
 width: 100px; /*with a width of 100px*/
}

#clear {
 clear:both;
}