Chaning Height of Div tags

[DJKAL]

Hi, i am creating a website and hav 2 div tags, one for navigation and one for the information. though to make the layout look better i want to make the two the same height, i originally sued the "<br />" tag, but then realised this wont work because the div tags are set to resize depending on the display size (setting the width to a certain %age) how can i get them to have the same hieghts though?the website is at http://2347porthcawl.co.uk/the "about us" page doesnt have the br tags but the hompage does (may not display in line for you as they do for me height wise though) any ideas?thanks.

[rswildy]

Use CSS.

#navigation {	float: left;	width: 250px;	height: 700px;}#content {	float: right;	width: 650px;	height:700px;}

Use the height and change it to whatever size you want, I'm not sure i quite understood the question if thats not what you mean then sorry my bad.

[DJKAL]

Use CSS.

#navigation {	float: left;	width: 250px;	height: 700px;}#content {	float: right;	width: 650px;	height:700px;}

Use the height and change it to whatever size you want, I'm not sure i quite understood the question if thats not what you mean then sorry my bad.

hi thankscan i set the height to be 100%? so that the height of the navigation div and the main div are the same? as they are both inside a bigger div to keep them aligned well.

[rswildy]

Yes, That should work considering they are both inside a bigger div.

[DJKAL]

Just tried it, and it doesnt seem to work :)set the height to be 100% and it doesnt work. maybe i've done something wrong? the div tag deffinaltey surrounds it but "height: 100%;" doesnt make the height to be 100% of the main div tag.

[rswildy]

The thing under the navigation menu saying something will go here, Is that a seperate tag showing under the navigation if so try setting 20% and 80% - 100% on content side.

[DJKAL]

it's seperate, starts a new div tag under neath - again inside a bigger div tag to hold that and the copyright section.

[rswildy]

Do you want a fixed height page or a page that will expand whenever you add new content :)You could try using tables - I onced used them to control my <div> tags.

<table width="800" border="0">  <tr>	<td width="143" height="100%" align="left" valign="top">Navigation DIV tag </td>	<td width="441" height="100%" colspan="2" align="left" valign="top">Content DIV tag</td>  </tr>  <tr>	<td height="100%" colspan="3" align="center">Footer DIV tag </td>  </tr></table>

[DJKAL]

expand i spose.the reason i can just use "br" is because the width is variable depending on the size of the window (set using percentages) it means that when i make the window smaller, or load the web page on a different monitor (say, laptop) that is smaller the page resizes automatically to keep the same layout. but, when loaded on a smaller display the text takes up more lines cos each line is shorter) and so it makes the div tag longer, which is fine. but i want to keep the navigation div and the main div the same height all of the time. using "<br />" doesnt work because it becomes too long or short when on a smaller display. i want it to be set to 100% of the div tag which holds the two smaller div tags (navigation and menu) so they will always be the same height,

[DJKAL]

tried those codes you gave me, still no luck

[croatiankid]

The faux columns method is most used, and best suited to ease this drawback of css. read here

[DJKAL]

from what i understand of that, i would have to use images. though, as my background has a gradient i wont be able to use extra images to create the effect.unless i created a div tag of a width say 17% (the navigation area), set that to have a black border as it does now, and then used a vertical white line, 1 px wide repeated across (x). this would give me the correct height. though i think this would work, it would take a lot of time to load and each time i load a new page would have to load a new white image as the sizes will be different form page to page. my idea is to have one background for all pages, and one basic lay out (as on my home page) but the height of each page will differ depending on it's content, for example. the homepage may just say welcome but the tours page may have many tours and so will be longer. for this reason i just wanted to use div tags with a white background. but i want them to be the same height as each other on any one page but when the width alters for diffeent display sizes and resolutions i want them to stay the same height as each other on that page, though they will become longer if the content is made to use smaller lines. to explain better, load the website from the first post, then make the window thinner. you'll notice the ratio of each div tag stays the same, they never come too close to eachother and keep their margins, but the whole thing messes up height wise.

[DJKAL]

Sorry to double post.I have thought of another way which might work. it involves one div tag, with a border. then a vertical line to split the navigation from the main content and a horizontal line. this means there will be one div tag, not 4 so that it will all change height - it will eliminate the gap between the two div tags but im sure that will be ok.what i need to know is though, how to i insert a vertical line? i know <hr> is for horizontal but i dont know the vertical line codes. any help?thanks.

[rswildy]

As far as i know there isn't a code for vertical lines, I would try using a graphical image or a very thin table.http://www.webmastercourse.com/web-design-...ine-divider.htmThats a vertical line they are just using a thin table, Thats the closest you will get i think, Feel free to let me know if im wrong.