www.webdeveloper.com
Results 1 to 4 of 4

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

Threaded View

  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 12:14 AM.

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