FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Variable width div





rohan2kool
this topic's title can be misleading.. but here's what i actually want.

I'm creating a complete tableless layout this time, and what i want a header that has 100% width. But this header has about 6 blocks. This is what i want:



Here are the blocks:



Now, all the blocks namely, block1, block2, block3, block4, block5 and block6 are kept as background properites of <div>'s, so they all have <div>'s of their own.

Now, i want it to completely occupy the width of the screen. But there's a problem. I have made all the div's with height and width in pixels, but the blockR is the block i want to have a repeat-x till the header completely occupies 100% of the space.

When i assign it a 100% width value to it, it flows to the next line and occupies the complete space. Any ideas on how to do it??

thanks a lot,
rohan
fadirocks
show us some code Please using the BBcode [code]
rohan2kool
This is the HTML code for the header:

http://pastebin.com/797664

And here's for the CSS:

http://pastebin.com/797665

thanks a lot Very Happy
hyhy
Haha this would also answer my topic.

http://www.frihost.com/forums/vt-53045.html
hyhy
Okay try this, i think it should work:
Code:

<div style="float:left; width: width of block 1 ;height:100%;">block1</div>
<div style="float:left;width: width of block 2;height:100%;">block2</div>
<div style="float:left;width: width of block 3;height:100%;">block3</div>
<div style="float:left;width: width of block 4;height:100%;">block4</div>
<div style="float:right;width: width of block 4;height:100%;">block5</div>
<div style="float:right;width: width of block 4;height:100%;">block6</div>
<div style="margin-left: sum of width of blocks1-4;margin-right: sum of width of blocks5-6;;height:100%; border:1px solid #000">blockr</div>


Make classes and be sure to enter the width's Laughing.
rohan2kool
margin's don't seem to be a good way to do it.. anyways i'll try and tell how it goes.
Related topics
Clock-javascript
How Do You Center Your Entire Web Page?
Variable length of iFrame
CSS div alignment issue, IE and FF (newbie problem)
How to update database?
Site Members' System
Java tutorials
px to em relation
div problems
neep help making email form that accepts html tags
Auto width\height if picture is wider than a given variable
CSS help positioning div
Letter-spacing to fit entire width of div?
Div width 100%
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.