fixed width + fluid width div
Moderators: Moderator, Global Moderator
fixed width + fluid width div
I'm trying to create a fixed width div on the left with a fluid width div on the right that occupies 100% of the remaining space; however it doesn't seem to ever work right. :\ Maybe this picture can help explain it a little better lol.
Last edited by Jim on Thu Dec 18, 2008 2:17 am, edited 1 time in total.
Love is all a matter of timing.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
fixed width + fluid width div
Edit:
Never mind, the method I did, didn't workout too well.
I am pretty sure that you need to create a main content div and then two nested divs inside. However, I'm also experiencing some problems with that.
[color=\"#FF0000\"]Edit 2:[/color]
Ok, well using the nested divs and margins I was able to create a close result to what you want. The original problem with mine was that when I had the 105px left margin and the width was set to 100%, the content div didn't do the 100% of what's left of the page but it went over. So for example, while the header was 100%, the content would have been about 110% because of the margin. It doesn't make a whole lot of sense, and I'm not sure why it does that. I know the margin throws it off but it should still figure out the page size and scale to it. <img src=\'http://www.killanet.net/forum3/public/s ... #>/dry.gif\' class=\'bbc_emoticon\' alt=\'<_<\' />
Anyway, my 'simple' solution was to lower the width % of the content so that it would match the header. So I had to change the percentage in small increments until they were about the same. I used 93.7% with a left fixed margin of 100px. Not an ideal solution, but it works.
Here is my result. I hope this helps.
Never mind, the method I did, didn't workout too well.
I am pretty sure that you need to create a main content div and then two nested divs inside. However, I'm also experiencing some problems with that.
[color=\"#FF0000\"]Edit 2:[/color]
Ok, well using the nested divs and margins I was able to create a close result to what you want. The original problem with mine was that when I had the 105px left margin and the width was set to 100%, the content div didn't do the 100% of what's left of the page but it went over. So for example, while the header was 100%, the content would have been about 110% because of the margin. It doesn't make a whole lot of sense, and I'm not sure why it does that. I know the margin throws it off but it should still figure out the page size and scale to it. <img src=\'http://www.killanet.net/forum3/public/s ... #>/dry.gif\' class=\'bbc_emoticon\' alt=\'<_<\' />
Anyway, my 'simple' solution was to lower the width % of the content so that it would match the header. So I had to change the percentage in small increments until they were about the same. I used 93.7% with a left fixed margin of 100px. Not an ideal solution, but it works.
Here is my result. I hope this helps.
Last edited by Marko on Thu Dec 18, 2008 5:49 am, edited 1 time in total.
fixed width + fluid width div
Thanks Marko <img src=\'http://www.killanet.net/forum3/public/s ... iggrin.gif\' class=\'bbc_emoticon\' alt=\':D\' /> I had a bit of insomnia last night and created a blank page to work on...instead of working with my theme like I had been. (yea, I know, I like it complicated sometimes ><) This is what I came up with, though my colours are not nearly as pretty. <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />
[codebox]<html>
<head>
<title>Test</title>
</head>
<body style="padding:0px;margin:0px;">
<div id="top" style="background-color:green;">a</div>
<div id="left" style="float:left;width:100px;background-color:blue;">b</div>
<div id="right" style="margin-left:100px;background-color:red;">Hello, this is a test of the long text program.</div>
<div id="bottom" style="background-color:green;">d</div>
</body>
</html>[/codebox]
[codebox]<html>
<head>
<title>Test</title>
</head>
<body style="padding:0px;margin:0px;">
<div id="top" style="background-color:green;">a</div>
<div id="left" style="float:left;width:100px;background-color:blue;">b</div>
<div id="right" style="margin-left:100px;background-color:red;">Hello, this is a test of the long text program.</div>
<div id="bottom" style="background-color:green;">d</div>
</body>
</html>[/codebox]
Last edited by Jim on Thu Dec 18, 2008 3:23 pm, edited 1 time in total.
Love is all a matter of timing.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
fixed width + fluid width div
Ok, so, I'm stupid...I had a div inside the content div and it had <div style="clear:both;"></div> which was causing it to go below the menu. <img src=\'http://www.killanet.net/forum3/public/s ... #>/cry.gif\' class=\'bbc_emoticon\' alt=\':(\' />
$fail++
$fail++
Love is all a matter of timing.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.
It's no good meeting the right person too soon or too late.
If I'd live in another time or place...
...my story might have had a very different ending.