www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do I set up three columns like this?

  1. #1
    Join Date
    Sep 2011
    Posts
    31

    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.
    Attached Images Attached Images
    Last edited by Windbrand; 03-06-2013 at 01:14 AM.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there Windbrand,

    check out the attachment, to see a possible solution.

    coothead
    Attached Files Attached Files

  3. #3
    Join Date
    Sep 2011
    Posts
    31
    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 files.
    (btw just using a test image for the right column)
    Attached Files Attached Files
    Last edited by Windbrand; 03-06-2013 at 11:24 AM.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles