Advanced Search

Results 1 to 8 of 8

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

  1. #1
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default 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 05:09 AM.

  2. #2
    Join Date
    Jan 2012
    Location
    India
    Posts
    43
    Thanks
    12
    Thanked 1 Time in 1 Post

    Default

    post your css

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,881
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    If you could post a link to your sample page (what you have so far), that would be great.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Yes sure, first post updated.

  5. #5
    Join Date
    Jan 2012
    Location
    India
    Posts
    43
    Thanks
    12
    Thanked 1 Time in 1 Post

    Default

    try this

    Code:
    .pagecontainer {
    margin-top:50px;
    padding-left:50px;
    padding-right:50px;
    position:relative;
    width:80%;
    height:450px;
    }
    .leftcolumn {
    margin-left: 50px;
    width: 250px;
    float:left;
    }
    .middlecolumn {
    float: left;
    margin: 0 10px;
    width: 390px;
    }
    
    .right_col {
    	width:300px;
    	float:right;
    	margin-right: 50px;
    	}
    .right_col img {
    	float: right;
            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>
    
        <div class="right_col"><img src="img.jpg" /></div>

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    Hi there windbrand,

    check out the attachment, to see a possible solution.

    coothead
    Attached Files Attached Files

  7. #7
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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 file.
    (btw just using a test image for the right column)
    Attached Files Attached Files

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    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

Similar Threads

  1. Need some help with Columns
    By Demthios in forum CSS
    Replies: 10
    Last Post: 04-29-2008, 01:13 AM
  2. CSS columns not staying
    By youngsc in forum CSS
    Replies: 3
    Last Post: 04-11-2008, 12:43 AM
  3. Need Help with Columns
    By reddiestorm in forum CSS
    Replies: 1
    Last Post: 12-07-2007, 05:44 AM
  4. The art of printing columns
    By hantz in forum ASP
    Replies: 0
    Last Post: 09-25-2007, 04:42 PM
  5. Columns
    By NADB in forum CSS
    Replies: 1
    Last Post: 07-13-2007, 02:42 PM

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
  •