Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    can not get my divs to position correctly

    this is what the div should look like using tables

    but i can unable to get this using divs.

    Code:
    <table width="100%" border="0">
      <tr> 
        <td colspan="2">this box should have a small bottom border</td>
      </tr>
      <tr> 
        <td>b</td>
        <td>c</td>
      </tr>
    </table>

    this is what code i currently have.

    can anyone help me on this?

    Code:
    <div style="margin:0 auto; padding: 5px 0px 0px 5px;">
    	<div style="float: left; background: url(images/left_halfroundedcircle.gif); background-repeat: no-repeat; width: 10px; height: 29px;"></div>
    	<div style="float: left; background-color: #000000; color: #CCCCCC; font-size:12pt; font-weight:bold; width: 95%; line-height: 29px;">&nbsp;&nbsp;BLURB BLURB BLURB BLURB BLURB </div>
    	<div style="float: left; background: url(images/right_halfroundedcircle.gif); background-repeat: no-repeat; width: 15px; height: 29px;"></div>
    <div class="clear"></div>
    </div>
    
    
    <div style="float: left; background-color: #000000; color: #CCCCCC; font-size:10pt; border-bottom: 1px solid #000;">BLURB BLURB BLURB BLURB BLURB </div>
    
    <div style="margin:0 auto; padding: 5px 0px 0px 5px;">
    <div style="float: left;>
    <div style="float: center; font-weight:bold; color: #6699FF;">BLURB BLURB BLURB BLURB BLURB BLURB </div>
    <div style="float: center; font-weight:bold; color: #004DEA;"><em>&quot;BLURB BLURB BLURB BLURB BLURB BLURB BLURB &quot;</em></div>
    
    <div style="float: justify; color: #6699FF;">
    <p>&nbsp;</p>
    BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB 
    </div>
    
    <div>
    BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB 
    </div>
    
    </div>
    
    <div style="float: left;>
    
    <div>
    <em><strong>Events</strong></em>
    <strong><a href="">Please check back to see its progress.<br><br></a></strong>
    </div>
    
    <p><strong>VIEW SOME OF OUR IMAGES</strong><br></p>
    
    <p><a href=""><img src="images/sm.jpg" width="114" height="82" border="0"></a>&nbsp;&nbsp;</p>
    
    </div>

  • #2
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Firstly - I'd suggest that you stop using inline CSS....setup an external CSS file - you'll find it much easier in the long run.

    Secondly, I think you may be getting muddled up with float & text-align....a float can't be center or justify.

    You should be able to achieve your table example by using only 3 divs...4 if you want to enclose them altogether.

    To get the side by side divs, you can either use float, or fixed widths & set them to display: inline-block;

    If you do use float, remember to clear the float after them because if you don't, you could cause other problems further down the page.

    So the div setup can be simply:
    Code:
    <div id="wrapper">
    
        <div class="border">
            <p>This is the div to have the bottom border.</p>
        </div>
    
        <div class='left'>
            <p>block to appear on the left</p>
        </div>
        <div class='right'>
            <p>block to appear on the right</p>
        </div>
    
    </div>
    The starting point for the CSS is:
    Code:
    * {
        margin: 0px;
        padding: 0px;
    }
    
    #wrapper {
        width: 950px;
        margin: 0px auto;
        background: #FFF;
    }
    
    .block {
        border: 1px solid #666;
        padding: 0px 0px 20px 0px;
    }
    
    .left {
        width: 50%;
        display: inline-block;
    }
    
    .right {
        width: 50%;
        display: inline-block;
    }
    I haven't checked this, but it should work....if you want to use float, have a play & see if you can make it work.

    The * is a global reset to zero all margins & padding
    Last edited by craftygeek; 06-11-2010 at 06:26 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •