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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How do I set up three columns like this?

    Does anyone know how I would get a page set up like this?


    http://i.imgur.com/cxLmGkl.png

    Code:
    .pagecontainer {
    margin-top:50px;
    padding-left:50px;
    padding-right:50px;
    position:relative;
    width:80%;
    height:450px;
    }
    .leftcolumn {
    width: 250px;
    }
    .middlecolumn {
    margin-left:250px;
    padding-left:25px;
    margin-right:300px;
    padding-right:25px;
    float:left;
    display:inline;
    }
    .verticalimage {
    float:right;
    display:inline;
    width:300px;
    }
    Code:
    <div class="pagecontainer">
    
        <div class="leftcolumn">text <br> text <br> text</div>
    
        <div class="middlecolumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem velit. Nullam et metus eget nunc egestas laoreet et quis ligula. Vivamus lobortis sodales pulvinar. Nunc malesuada pretium ornare. Aliquam ut erat at magna pellentesque elementum. Fusce facilisis lorem et tortor euismod bibendum.</div>
    
        <img class="rightverticalimage" src="picture1.png"/>
    
    </div>
    - A page container with dynamic width of 80% of browser window
    - Inside it are 3 sections:
    - Left text column of 250px width, 50px margin to the left against pagecontainer
    - Right column is an image of 300px width, 50px margin to right against pagecontainer
    - Middle column is whatever space that's left in the middle, dynamic width

    I've tried various combinations of floats and display types (block, inline-block, etc) but can't get it to work. The vertical image keeps getting bumped below the middle column of text.

    Thanks.
    Last edited by Windbrand; 03-06-2013 at 07:14 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello Windbrand,
    I have a demo that shows that here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I checked that demo but the width of the container is not dynamic as I resize the browser window. I need the container to stretch in width when the browser window has high resolution, but the left/right columns to be fixed in width.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by Windbrand View Post
    I checked that demo but the width of the container is not dynamic as I resize the browser window. I need the container to stretch in width when the browser window has high resolution, but the left/right columns to be fixed in width.


    Try making this change highlighted in red -
    Code:
    #container {
    	/*width: 1000px;*/
    width: 80%;
    	margin: 30px auto 900px;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    To explain further, remove or comment out that width: 1000px; that sets #container to a fixed width.
    Put in your 80% width with this line - width: 80%;
    Last edited by Excavator; 03-06-2013 at 09:19 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Windbrand,

    check out the attachment, to see a possible solution.

    coothead
    Attached Files Attached Files

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks I've tried that on my page but it won't work still. It's really weird your test page works perfectly, I pretty much copied over the code on mine but it still won't work...
    Here is my code:

    Code:
    .pagecontainer {
    	overflow-y:auto;
    	overflow-x:hidden;
    	background: transparent url(pagecontentoverlay.png);
    	width:80%;
            min-width:800px;
            padding:30px 0;
    	height:500px;
    	margin: 0 auto;
    	font-size:12px;
    	color:#999;
    }
    
    .pagecontainer>div{
    	padding-left:50px;
    	padding-right:50px;
    	position:relative;
    }
    
    .middlecolumn {
    	padding:10px;
        margin:0 300px 0 273px;
    }
    
    .rightverticalimage {
    	float:right;
        width:200px;
        padding:10px;
    }
    
    .leftcolumn{
    	float:left;
        width:250px;
        padding:10px;
    	font-size:16px;
    	text-align:left;
    	border-right:thin solid #fff;
    }
    Code:
    <div class="pagecontainer">
    
    	<div id="lisztwork3page">
    		
    		<div class="leftcolumn">
    			<a href="#lisztpage" class="link_expandContainer" onclick="return false">Back to main</a>
    			<p>
    			<font size="-1">
    			<a href="#lisztwork1page">Hungarian Rhapsody No.2</a>
    			<p>
    			<a href="#lisztwork2page">La Campanella</a>
    			<p>
    			<b>| Transcendental Etude No.4 |</b>
    			<p>
    			<a href="#lisztwork4page">Transcendental Etude No.5</a>
    			<p>
    			<a href="#lisztwork5page">Transcendental Etude No.8</a>
    			</font>
    			<p>
    		</div>
    		
    		<div class="middlecolumn">
    			<b>Transcendental Etude No.4 "Mazeppa"</b>
    			<br>
    			<br>
    			<br>
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus justo eget lorem porta iaculis. 
    			Fusce dictum ipsum in turpis pellentesque pellentesque. Pellentesque facilisis, nulla sed suscipit dignissim, 
    			lacus sem dictum ligula, vel facilisis neque mi eu purus. Sed quis erat velit, sit amet volutpat urna. Aliquam erat volutpat. 
    			Cras purus diam, volutpat porttitor blandit sit amet, tempor et risus. Aenean pharetra nisi quis nisi vestibulum ut molestie 
    			lacus aliquam. Curabitur vitae nisi orci, quis dapibus mauris. Sed leo magna, facilisis eget auctor non, pharetra ac mauris. 
    			Vestibulum massa felis, tincidunt ac tristique ut, tincidunt nec tortor.
    		</div>
    		<br>
    		<br>
    		<br>
    		
    		<img class="rightverticalimage" src="http://api.ning.com/files/GTfAIob4Rdv8a6DlFSc9WysVp-JgbpduT7uYIE8j1ikuGsgC-29xobgn8H0TmQ9BToHy0hy9EZThN*qhBF9Kqs0MJs0O-XQJ/musicnotes.jpg" alt=""/>
    
    	</div>
    
    </div>
    I have no idea what's wrong :/
    I have uploaded the test files.
    (btw just using a test image for the right column)
    Attached Files Attached Files

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Look at what happens when you change the order in the markup, remember - floats come first.

    Code:
    <!DOCTYPE HTML>
    <html xmlns:fb="http://ogp.me/ns/fb#">
    <head>
    
    	<link href="test.css" rel="stylesheet" type="text/css">
    
    
    </head>
    
    <body>
    <div class="pagecontainer">
    
    	<div id="lisztwork3page">
    		
    		<div class="leftcolumn">
    			<a href="#lisztpage" class="link_expandContainer" onclick="return false">Back to main</a>
    			<p>
    			<font size="-1">
    			<a href="#lisztwork1page">Hungarian Rhapsody No.2</a>
    			<p>
    			<a href="#lisztwork2page">La Campanella</a>
    			<p>
    			<b>| Transcendental Etude No.4 |</b>
    			<p>
    			<a href="#lisztwork4page">Transcendental Etude No.5</a>
    			<p>
    			<a href="#lisztwork5page">Transcendental Etude No.8</a>
    			</font>
    			<p>
    		</div>
    		
    		<img class="rightverticalimage" src="http://api.ning.com/files/GTfAIob4Rdv8a6DlFSc9WysVp-JgbpduT7uYIE8j1ikuGsgC-29xobgn8H0TmQ9BToHy0hy9EZThN*qhBF9Kqs0MJs0O-XQJ/musicnotes.jpg" alt=""/>
    		
    		<div class="middlecolumn">
    			<b>Transcendental Etude No.4 "Mazeppa"</b>
    			<br>
    			<br>
    			<br>
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus justo eget lorem porta iaculis. 
    			Fusce dictum ipsum in turpis pellentesque pellentesque. Pellentesque facilisis, nulla sed suscipit dignissim, 
    			lacus sem dictum ligula, vel facilisis neque mi eu purus. Sed quis erat velit, sit amet volutpat urna. Aliquam erat volutpat. 
    			Cras purus diam, volutpat porttitor blandit sit amet, tempor et risus. Aenean pharetra nisi quis nisi vestibulum ut molestie 
    			lacus aliquam. Curabitur vitae nisi orci, quis dapibus mauris. Sed leo magna, facilisis eget auctor non, pharetra ac mauris. 
    			Vestibulum massa felis, tincidunt ac tristique ut, tincidunt nec tortor.
    		</div>
    		<br>
    		<br>
    		<br>
    		
    
    	</div>
    
    </div>
    </body>
    </html>
    ...
    The next step would be to validate both your CSS and your Markup. Have a look at the links in my signature about validation.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Windbrand (03-07-2013)

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Windbrand,

    when I try to open your attachment with "WinZip", I get this message...

    Cannot open file: it does not appear to be a valid archive.

    I would have added yours to mine, not the other way round.

    coothead
    Attached Files Attached Files

  • Users who have thanked coothead for this post:

    Windbrand (03-07-2013)

  • #9
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    I could suggest using min-width for this setting. The sample below is flexible to the screen size, however when the screen shrunken the boxes will not shrink below 200px. I use a similar column layout for my site (you're welcome to check out the site's code, it's linked from my profile) to ensure no blank spaces when the screen is shrunken and that everything stays in place. It will be very difficult to have the middle section automatically adjust with the rest of the page based on percentage without the other two columns falling under it, because of the float value and the space available.

    Code:
    <html>
    <head>
    <style>
    #box1 {
    float: left;
    background: red;
    width: 40%;
    min-width: 200px;
    margin-right: 25px;
    }
    #box2 {
    background: black;
    float: left;
    width: 40%;
    min-width: 200px;
    }
    </style>
    </head>
    <body>
    <div id="box1">text</div>
    <div id="box2">text</div>
    
    </body>
    </html>
    I hope this helps.

  • Users who have thanked Obsidian for this post:

    Windbrand (03-07-2013)

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks!
    Excavator is right, switching the order of the float elements in the html worked.


  •  

    Tags for this Thread

    Posting Permissions

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