www.webdeveloper.com
Results 1 to 2 of 2

Thread: div element positioning

Hybrid View

  1. #1
    Join Date
    Apr 2009
    Location
    India
    Posts
    15

    Question div element positioning

    i want to align 4 div elements horizontally without using a table.
    <div 1></div> <div 2></div> <div 3></div> <div 4></div>
    Out of 4 div, first div may have variable content from database and adjust its width. Besides that, other three div should adjust themself and fit in a single line.
    How can i set the styles for the above scenario?

  2. #2
    Join Date
    May 2010
    Location
    SF Bay Area, CA
    Posts
    26
    To have your 4 divs aligned horizontally, you certainly have to float each one of them.

    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section last"></div>

    ------------------------------
    In your stylesheet

    .section{
    float:left;
    clear:none;
    width:24&#37;;
    height:auto;
    margin-right:1%;
    overflow:hidden;
    }

    .last{
    float:right;
    clear:right;
    margin-right:0
    }
    --------------------------------
    Because your page is dynamic you can add an inline style in each div to set its width accordingly.
    For example your PHP, ASP or JSP code could reformat your HTML markup as shown below:

    <div class="section" style="with:40%;"></div>
    <div class="section" style="width:19%"></div>
    <div class="section" style="width:19%"></div>
    <div class="section last" style="width:19%"></div>

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