SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS float and alignment question

    Hi,

    I want to place an image on the left and a paragraph on the right of my page and I want to align both of them to the center like the following image shows:

    css-float-center.png

    I have the following code but it doesn't do what I want.

    HTML Code:
    <div class="div1">
    <img src="image.jpg" />
    </div>
    <div class="div2">
    <p>Text goes here.</p>
    </div>
    CSS:

    Code:
    .div1 img{float:left}
    .div2{margin:0 0 0 110px}
    110px is the width of the image.

    Any ideas how to align them as it is shown in the image? Thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I can't see your image yet, so this is a best guess for this type of question
    Code:
    <div class="centered">
        <div class="imgbox">   
           then the image
        </div>
        <div class="textbox"> 
           then the text
        </div>
    </div>
    
    .centered {
    width:to suit requirements; say 600px
    margin:auto;
    }
    
    .imgbox{
    width:some width that works; perhaps your 110px; or 150px (so other images will also fit)
    padding:some small value, say 5px;
    float:left;
    }
    
    .textbox {
    
    width: some other width, say 400ish;
    float:left;
    padding:5 or 10px;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    As mentioned above you could just float both those elements with the correct width and then place a wrapper around both of them and center the wrapper with auto margins. You would need to give the wrapper a width to match the two floats though.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    img{
    	display:block;
    	background:#000;/* color for testing */
    	border-right:10px solid #fff;
    }
    .block,.block2{
    	width:120px;
    	float:left;	
    }
    .wrap{
    	width:240px;
    	margin:auto;/* center the container*/
    	background:#ccc;
    	overflow:hidden;/* contain the floats */	
    	border:1px solid red;
    }
    p{margin:0 0 .5em}
    
    </style>
    </head>
    
    <body>
    <div class="wrap">
    <div class="block"> <img src="image.jpg" width="110" height="110" alt="Important info" /> </div>
    <div class="block2">
    		<p>Text goes here.</p>
    		<p>Text goes here.</p>
    		<p>Text goes here.</p>
    </div>
    </div>
    </body>
    </html>

    Depending on situation we could do it with one wrapper assuming that dimensions are standard and known by floating the image into the padding space next to the text.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .block img {
    	float:left;
    	margin:0 0 0 -120px;
    	background:#000;/* color for testing */
    	border-right:10px solid #fff;
    display:inline;/* ie6 double margin fix*/
    }
    .block {
    	width:120px;
    	padding:0 0 0 120px;
    	margin:auto;
    	background:#ccc;
    	overflow:hidden;/* contain the floats */
    	border:1px solid red;
    }
    p { margin:0 0 .5em }
    </style>
    </head>
    
    <body>
    <div class="block">
    		<p><img src="image.jpg" width="110" height="110" alt="Important info" />Text goes here.</p>
    		<p>Text goes here.</p>
    		<p>Text goes here.</p>
    </div>
    </body>
    </html>
    With css there are many ways to do the same thing but it does depend on the requirements and what happens next.

  4. #4
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John and Paul, thanks for your help. I always forget about margin: auto when aligning things.


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
  •