#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    Need help aligning list, picture and text (picture to demonstrate)


    so this is one of the sections of my web-page..

    i <dot> imgur.com <dot> IUIEcWa.jpg (replace dots with . to view the example)

    I want the list to be on the right side (but not right aligned), then I want to have some text at the top left and a picture at the bottom right.

    Here is the current CSS code I'm using, I tried adding float:right, but it messed up the rest of my page:

    #default_page{
    display: block;
    position: relative;
    margin: 0 auto 0;
    width: 920px;
    height: 350px;
    padding: 20px 20px 30px 20px;
    overflow: hidden;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #666666;
    background-color: #FFFFFF;
    list-style-type: circle;
    }

    Here is the HTML code:

    <div class="wrapper col3">
    <div id=default_page>
    <p><strong>Residential Services:</strong><ul.a>
    <list-style-type: circle><li width=25%>Room Additions</li> <li>Kitchens</li> <li>Bathrooms</li> <li>Replacement</li> <li>Windows</li> <li>Cement Siding</li> <li>Countertops</li> <li>Ceramic Tile</li> <li>Wood Flooring</li> <li>Painting</li> <li>Custom Trim & Mill Work</li> <li>Custom Concrete</li> <li>Home Improvements</li> <li>Garages</li> <li> and more... </li>
    </div>
    </div>

    I'm a big noob, so any help is appreciated.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    you just need to create 2 more DIVs inside your #default_page DIV.
    float one left [for the left side content] and float the other right [for the right side content]....then, you can place the right side content into the right floated DIV and put your text and picture into the left floated DIV.

    You will, of course, need to add widths and/or margins/padding to get things how you want them.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0
    Thanks for the reply! Figured it out with your help
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    Basically, you want to take your existing code and change it to this
    Code:
    <div class="wrapper col3">
    <div id=default_page>
    <div id="content-left"><PLACE YOUR TEXT AND IMAGE IN HERE></div><!-- end #content-left -->
    <div id="content-right">
    <p><strong>Residential Services:</strong>
    <ul.a style="list-style-type: circle">
    <li style="width:25%;">Room Additions</li> 
    <li>Kitchens</li> 
    <li>Bathrooms</li> 
    <li>Replacement</li> 
    <li>Windows</li> 
    <li>Cement Siding</li> 
    <li>Countertops</li> 
    <li>Ceramic Tile</li> 
    <li>Wood Flooring</li> 
    <li>Painting</li> 
    <li>Custom Trim & Mill Work</li> 
    <li>Custom Concrete</li> 
    <li>Home Improvements</li> 
    <li>Garages</li> 
    <li> and more... </li>
    </div><!-- end #content-right -->
    </div><!-- end #default_page -->
    </div><!-- end .wrapper .col3 -->
    and style #content-left and #content-right as I told you above, essentially:
    Code:
    #content-left{
    float:left;
    width:60%;
    }
    
    #content-right{
    float:right;
    width:40%;
    }
    Or something similar to that.

    ***Also, this code
    Code:
    <list-style-type: circle><li width=25%>
    is not legal code, which is why I changed it in the above html code to use the style attribute instead.
    Last edited by DonR; June 13th, 2013 at 10:09 AM.

IMN logo majestic logo threadwatch logo seochat tools logo