...

View Full Version : Css Height resizing



hmvrulz
01-13-2008, 09:58 AM
http://hmv.co.in/temp/html/boxes.html

when the content of the box of either left and right boxes in the above page is diff... the boxes margin is also changed...

how can i make both the boxes of the same siz so tht theres blank space in the box tht has less content

abduraooft
01-13-2008, 11:00 AM
Since the width of the columns are fixed, you can make use of http://www.alistapart.com/articles/fauxcolumns/
Make a background having 4 lines to resemble the borders and put the two columns inside a wrapper div and put the background for your wrapper.

Since you are using floats, add a <br style="clear:both"/> after the #rightbox just before closing your wrapper.

hmvrulz
01-13-2008, 11:05 AM
Since the width of the columns are fixed, you can make use of http://www.alistapart.com/articles/fauxcolumns/
Make a background having 4 lines to resemble the borders and put the two columns inside a wrapper div and put the background for your wrapper.

Since you are using floats, add a <br style="clear:both"/> after the #rightbox just before closing your wrapper.

u mean add <br style="clear:both"/> inside the DIv of the right box or the whole parent div...

sir can i contact u on yahoo or gtalk instant messenger

abduraooft
01-13-2008, 11:25 AM
#faux-wrapper{
background:url(path-to-a-wide-image-having-the-design-for-border) repeat-y;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
br.both{clear:both}
/* the rest of CSS for left & right columns */


<div class="faux-wrapper">
<div class="left></div>
<div class="right></div>
<br class="both"/>
</div>

hmvrulz
01-13-2008, 11:40 AM
#faux-wrapper{
background:url(path-to-a-wide-image-having-the-design-for-border) repeat-y;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
br.both{clear:both}
/* the rest of CSS for left & right columns */


<div class="faux-wrapper">
<div class="left></div>
<div class="right></div>
<br class="both"/>
</div>

here am using

border:1px solid #d8d8d8;

for border

how can i use this as back gorund ?




#box {
width:100%;
height:100%;
}

#boxleft {
float:left;
width:46%;
height:100%;
border:1px solid #d8d8d8;
padding:5px 10px 0 10px;
}

#boxright {
float:right;
width:46%;
height:100%;
border:1px solid #d8d8d8;
padding:5px 10px 0 10px;
}


<div id="box">
<div id="boxleft">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
<p class="block"><strong>Please note:</strong> This template is built with XHTML and CSS code only. It contains no CMS-specific code. It may be customized to work with many different content management systems, but that will require additional programming.</p>
</div>
<div id="boxright">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
</div>
</div>
<br clear="all" />
<br clear="all" />
<div id="box">
<div id="boxleft">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
<p class="block"><strong>Please note:</strong> This template is built with XHTML and CSS code only. It contains no CMS-specific code. It may be customized to work with many different content management systems, but that will require additional programming.</p>
</div>
<div id="boxright">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
</div>
</div>

abduraooft
01-13-2008, 11:48 AM
Have you looked the link http://www.alistapart.com/articles/fauxcolumns/

Excavator
01-13-2008, 05:48 PM
Hello hmvrulz,
Like abduraooft says, a faux column background on each .box would make each .boxright and .boxleft appear equal height.
This would be easier than making an image:

.boxleft {
float:left;
width:46%;
height: 420px;
border:1px solid #d8d8d8;
padding:5px 10px 0 10px;
}

.boxright {
float:right;
width:46%;
height: 420px;
border:1px solid #d8d8d8;
padding:5px 10px 0 10px;
}


Yes, I changed your id's to classes. Check my suggestion and links about validating in my sig below.

.

Excavator
01-13-2008, 06:00 PM
Try this image as a background for .box repeated on the y-axis. You'll probably need to make your own image.

Then remove the left/right borders from .boxleft and .boxright and margin your text to stay inside the background image borders.

hmvrulz
01-14-2008, 05:34 AM
Try this image as a background for .box repeated on the y-axis. You'll probably need to make your own image.

Then remove the left/right borders from .boxleft and .boxright and margin your text to stay inside the background image borders.

i tried this... but i am not able to get the bottom border to the place of alignment....

is there any way to do it....


i found this on the web
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

it does the job for the 1st set of right n left boxes...
but for subsequent sets it cant do it... if any one can help me modify this..am not good with java scprits...

Excavator
01-14-2008, 07:14 AM
Hmm.
Seems we can't get the bottom border in the right place at all, faux columns or no.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum