Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div-Columns with same Height

    I want to do something like this:

    Name:  divs.png
Views: 31
Size:  16.3 KB


    This would be quite easy with a table, but I would like to do it with divs. But somehow, I can't find out, how to do this

    Can anybody help my?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    It's doing it to me again VIP.

    Use floats and clear them.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    #container{
    	width: 400px;
    }
    #short{
    	width: 49%;
    	float:left;
    }
    #big{
    	width: 49%;
    	background-color: gold;
    	float:right;
    }
    #switch{
    	clear:both;
    	float:left;
    	width: 49%;
    	height: 50px;
    	background-color: red;
    }
    #switchagain{
    	float:right;
    	width: 49%;
    	height: 50px;
    	background-color: red;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="short">
    		This is some text. This is some text<br />
    		This is some text<br />This is some text<br />This div is SHORT.
    	</div>
    	<div id="big">
    		This is ALSO some text. This is some text<br />
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    		But this is the longer div. So long it is.
    	</div>
    	<div id="switch"></div>
    	<div id="switchagain"></div>
    </div>
    </body>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks @sunfighter.

    Now that I see it, it looks easier than I thought.


  •  

    Posting Permissions

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