Results 1 to 5 of 5

Thread: Left column isn't same height as right column when data is added

  1. #1
    Join Date
    Jul 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Left column isn't same height as right column when data is added

    1) Script Title: CSS Liquid Layout #2.1- (Fixed-Fluid)

    2) Script URL (on DD): bayridgemarket.com/testhgt.php

    3) Describe problem: Would like heights to stay the same on BOTH columns. If right is longer, left should be the same height even if not enough data. Same goes for left. It should stay the same as the right.

    You can see what I mean in URL in number 2. Don't really care about right column so much as background is going to be white anyway, but need left to stay same height as right. Thanks. Been going crazy trying to get this to work as I'm pretty much new to css.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    This is normal, and one of the limitations of a "float" based layout- the column heights do not sync up. There are various hacks and JavaScript solutions to this, which you may want to do a search on Google for.

    A more elegant, future proof solution is to use CSS flex box if you don't care about IE 10 and below support. The following uses Flexbox to create a two column layout whereby the heights of the column are always the same:

    Code:
    <!doctype html>
    
    <style>
    
    div.flexcontainer{
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	min-height: 100vh; /* set min container height to viewport height */
    }
    
    div.columns{
    	padding: 10px;
      box-sizing: border-box; /* make padding part of width declared, not in addition */
    }
    
    div.columns:nth-of-type(1){
    	background: #eee;
    	-webkit-box-flex: 0;
    	    -ms-flex: 0 0 250px;
    	        flex: 0 0 250px; /* make this flex item 250px wide and non flexing */
    }
    
    
    </style>
    
    <body>
    
    <div class="flexcontainer">
    
    	<div class="columns">This is column 1</div>
    	<div class="columns">This is column 2</div>
    
    </div>
    
    </body>
    DD Admin

  3. #3
    Join Date
    Jul 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default This looks nice.

    Where would I go to learn about them?

    Is there a way to limit the max width to 900px in column 2? in example I gave I have a header and don't want text to go past right of header image. Thanks.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Where would I go to learn about them?
    Other methods of equal height columns/divs? A Google search on "equal height div" brings up loads.

    If you want to learn about flexbox, there loads of tutorials online too - CSS Tricks has a Complete Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    And there's a cute froggy game here that helps you learn by moving the frogs around the screen: http://flexboxfroggy.com/ (great fun)

    Is there a way to limit the max width to 900px in column 2?
    For a max-width on columns 2... The max-width: 960px; property:value pairing is your friend. But, this will have the effect of aligning the content to the left of the screen, so you might want to apply justify-content: center; to div.flexcontainer to float them both centrally. Again, Flexbox Froggy can help you visualise the effects of various flexbox properties, so work through the stages of the 'game' to understand more.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Jul 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Working fine now

    Thanks for your help. I had a feeling when I found this site, it was going to be a fav of mine. I seem to recall something similar many years ago but then it was just all kinds of menus. I don't even think it had a forum. Is this the same one?

    I'm just getting into CSS and am doing a couple of new sites in php and MySQL. I do my scripts mostly in Notepad++. I hope I won't be a pest. Would donate if you have donate page. Thanks again.

Similar Threads

  1. CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column
    By Rajan Thought in forum Submit a DHTML or CSS code
    Replies: 1
    Last Post: 01-23-2012, 05:27 PM
  2. Fixed left column
    By Atom in forum HTML
    Replies: 7
    Last Post: 09-02-2011, 09:15 PM
  3. Replies: 3
    Last Post: 05-26-2011, 07:25 PM
  4. column headings added to AnyLink Drop Down Menu v2.0
    By mcarey101 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-03-2009, 11:48 PM
  5. left column issue
    By beth67 in forum CSS
    Replies: 1
    Last Post: 02-26-2009, 03:59 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •