Basic Css Layout Issue - Floated Cell with similar height

moldboy

Apr 9 2006, 07:23 PM

Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem being I don't know how to make a floated cell be the same height as another. FOr example

CODE

<div id="main">

<div id="left">
just some </br> stuff over </br> here!
</div>

<div id="right">
but...</br> over here </br> I have </br> even more stuff</br> to </br> display</br>
</div>

</div>

now If I float the left to the left and the right to the right and set ther widths so that they will be beside eachother the left div is shorter then the right, which makes sense because there is more content in the right. I want to know how to make them the same height without specisifing the actual height, because it may change.

truefusion

Apr 9 2006, 08:22 PM

If you're under standard-compliant mode, then i dont think you can specify 100% height. But, with certain styles, you can make it seem like it is. For example, if "left" has a border, remove it, and do the same with "right". But, just have "main" with the border.

jlhaslip

Apr 9 2006, 08:51 PM

There is a technique known as "faux columns" which would apply to solve your problem of the height of the left column being less than the Main Content. Look it up at http://www.alistapart.com.
And the other thing you would want to add to the css for the page you list up there would be a margin on the right - hand div that is equal to or greater than the width of the left-hand column. The margin would be in the same direction as the floated column. ie: margin-left. It would be un-neccesary to float the right hand column on the page.

HTML

<div id="main">

<div id="left">
just some </br> stuff over </br> here!
</div>

<div id="right">
but...</br> over here </br> I have </br> even more stuff</br> to </br> display</br>
</div>

Css for the page:

CODE

body { margin:0; padding: 0;}
#main {}
#left { float:left; width:20%;}
#right { margin-left: 20%;}

Plus the code required for the faux-columns.

moldboy

Apr 9 2006, 10:31 PM

QUOTE

There is a technique known as "faux columns"

thanks that's exaclty what I wanted, although I thought there might be a diffrent way as all the sites use this two coloum structure and still have the same height. f there is another way, please tell.

jlhaslip

Apr 10 2006, 12:18 AM

If there was another way that worked and I knew about it, I would have mentioned it.
Also, don't forget a Doc Type Declaration.

Tyssen

Apr 10 2006, 12:53 AM

QUOTE(jlhaslip @ Apr 10 2006, 10:18 AM)

If there was another way that worked and I knew about it, I would have mentioned it.

http://www.positioniseverything.net/articles/onetruelayout/

Recent Queries:-

css textbox height 100% - 70.29 hr back. (1)

Similar Topics

Keywords : css layout issue floated height

Css Layout Generator - *free* - Generate a CSS layout for your site (3)
pretty powerful css layout generator. /smile.gif' border='0' style='vertical-align:middle'
alt='smile.gif' /> and it's freely available online.
http://www.csscreator.com/version2/pagelayout.php QUOTE To create your layout select the
structural elements your site requires (header, footer, columns). Then specify a size in the field
provided and choose a background color from the color chooser below. The color chooser changes
values as you move your mouse along a row. To set a value click on the color row to release click
again. Once the color in the box is th...

Css Layout Help - need help with my layout (8)

Css Help 100 % Height - (6)

Allright so im working on a page and i need ot to always extent to the bottom of the page go figure
lol.... However i cant figure out how to do this and have it work... either css or w/e else can be
used to do it i just cant get it to flaot or sit at the bottom heres what ive got so far
http://woodlawnwt.com/tdc/duffield-collection.html works in dreamwearver ( i use it for the color
code and the ftp stuff... not for the wysiwig stuff lol...) but i cant get it to show in either ff
or ie http://ryanfait.com/sticky-footer/ solution is there.... lol...

100% Height Issue With Stretching Top To Bottom - Full Page - Problem with content not stretching from top to bottom. (5)

Another CSS problem thats been annoying me. I got this tempalte off
http://www.xs4all.nl/~peterned/examples/csslayout1.html the css file is here
http://www.xs4all.nl/~peterned/examples/css/layout1.css I went ahead and applied it to my template.
Their main divs contain 1 main container, 3 sub divs (header, content, and footer). HTML div
id =" container "> div id =" header "> /div > div id =" content "> /div > div id
=" footer "> /div > /div > I've had to add a few more divs inside the header div to
include my table for banner an...

How Do I Extend My Div To 1oo% Height? - Also welcoming criticisms on my webpage (13)

Hi all, this is a two part post, firstly how do i get my DIV to go the full length of my page
without specifying its height in pixels? My first thought is by using a percentage height but it
seems to have no effect on the DIV. I ask because of this page http://www.shadows.trap17.com/ww/
that i created. Now im using 128Ox8OO res at the moment and with my current use of BR tags i can
extend the div down to the bottom of the page, only in firefox its a few pixels too short and in IE
its a few too long so i get scrolling in IE and a grey gap in FF, not good for a website ...

Lists, Unordered And Nested - some layout tricks (2)

Unordered lists are one of the three list types in (x)html. The others are Ordered Lists and
Definiton Lists. The w3c page of information about lists is here They all behave the same as
(x)html elements, but there are some differences between them. Read the Specification page linked
above to know more that you need to know about them. Only difference between html4 and xhtml is the
tags must be lower-case and closed for xhtml to be valid. Ordered Lists have numbers preceding
them. Paste the following code into a file and display it in your Browser to see the eff...

Help Fix My Site's Css/layout Issues - Thanks for your time (9)

The first issue has been resolved. Please goto Post #7 to see the current discussion.
This is in reference to: http://facesofwar.org/cms/ When you load the page up in Firefox it
works fine. But when you use I.E. it creates a nasty line break after each of the spans containing
a dividing line. The relevant html is: CODE <span
class="menuOuter"></span> <span
class="menuMain">Home Iraq Alt.
Media Other Contact</span&...

Height % In Ff Problems With Css - (3)

Does anyone know how to make the height of a div in firefox equal to the percentage you input? For
example if I put blablabla the div container will only be as high as the text makes it, when in
internet explorer it does make it take up 100% of the page or whatever height in percentage I input
in it. by the way, html, body {} have 100% height in them, so does the container that has the div
element. Example: html,body {height:100%;} #container {height:100%;} #div {min-height:100%;} the
one called #div is the one I want with 100% height. Thanks for any help....

Css Layout: Trouble With Ie - the scrollbar and margin-bottom (4)

I have a site which I'm developping and trying to get a frames-like layout design. But IE does
not propperly show the scrollbox, its hidden behind the fixed divs of the top header and the bottom
footer... Firefox does alright, so If you dont understand what I mean you can check it out here:
http://web.cucea.udg.mx/ineser/alap/test.php Seems like Opera and Safari are doing also good...
And also, the margin of #content (which is the main content area) is not working, becouse it does
not go up above the footer, I don't know what is going on (that rule is ins...

Unordered List Css Layout - two rows of list and sublist (4)

I have a layout which i want to do fully in CSS. Im having trouble centering the second list, or
sublist which comes from the menu. It doesnt work in IE now, just firefox (Actually the page doesnt
even show on IE, nor Opera, i dont know why). I just want it to appear centered, when im hovering
the main list, not left aligned... Here's the link, youll understand when you see it...
http://web.cucea.udg.mx/cucea/graphix/level5/ I also want to fix the background, (i removed the
background for now) becouse when i hover the sublist items, the background becomes bigge...

Moving Ads With Css Layout On Free Hosting - CSS help (7)

Can anyone help me how to move top banner from free host? I hear that can be done with css!...

Css How To Use It? - how do you use it to make a custom layout 4 website? (3)

how you make a custom layout and what is the coding and stuff?...

Css Files, Get Your Css Files Here! [resolved] - Want a nice CSS layout? (0)

Alright, if anybody wants a CSS layout; I'll make one for you! Just tell me what you want
the background color to be, main font color, and the link colors! Then later in the topic
I'll post them and I'll post the username of the user that requested next to them so you
know which one is yours! So if anyone wants a CSS File; Ask Mike! >_>...

Looking for basic, css, layout, issue, floated, cell, similar, height

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE