SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to style this?

    Hi,
    I know this is easy but I can't make it work. All I do is making foto float left but than ... I don't know, nothing works fine.
    How to style the divs as in attached image so they divs stayed fluid while changing browser size?
    Attached Images Attached Images
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This isn't perfect, but here's my first quick attempt at it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    .cont {padding: 20px; width: 50%; border: 1px solid black; margin: 40px auto; height: 50%;}
    .photo, .text {width: 48%; background: black; color: red; display: inline-block; vertical-align: bottom; text-align: center;}
    .photo {line-height: 10em;}
    .text {line-height: 5em;}
    </style>
    	
    </head>
    <body>
    
    <div class="cont">
    	<div class="photo">
    		<p>Foto</p>
    	</div>
    	<div class="text">
    		<p>Text</p>
    	</div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This isn't perfect, but here's my first quick attempt at it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style media="all">
    .cont {padding: 20px; width: 50%; border: 1px solid black; margin: 40px auto; height: 50%;}
    .photo, .text {width: 48%; background: black; color: red; display: inline-block; vertical-align: bottom; text-align: center;}
    .photo {line-height: 10em;}
    .text {line-height: 5em;}
    </style>
    	
    </head>
    <body>
    
    <div class="cont">
    	<div class="photo">
    		<p>Foto</p>
    	</div>
    	<div class="text">
    		<p>Text</p>
    	</div>
    </div>
    
    </body>
    </html>
    Thanks Ralph for your respond.
    I doesn't work properly for me. Actually I don't mind the colors or font.
    The bigest problem is that I use Adaptive Images script to keep the image (foto, it should be photo) fluid so when I resize the browser the image stay still but the text moves somewhere where it shouldn't.
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you may need to clarify a little more the dynamics of what you need as inline-block seems to do what you asked. Or perhaps create an example (from Ralphs code) and explain where it all goes wrong.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    is this what you were aiming for?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><head>
    <title>Experiment</title>
    	
    <style media="all" type='text/css'>
    .cont {padding: 20px 20px 20px 50px; width: 50%; border: 1px solid black; margin: 40px auto; height: 50%;text-align: center}
    .photo, .text {width: 50%; background: black; color: red; display: inline-block; vertical-align: bottom; text-align: center;}
    .text {line-height: 5em; }
    .photo{margin-left:-30px; margin-right: 20px}
    .photo img {display: block; width:100%; height:100%;}
    </style>
    	
    </head>
    <body>
    
    <div class="cont">
    		<div class="photo"><img height='100' width='100' alt="photo" src="#" ></div> 
    		<div class="text">Text</div>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried to use your code mixed with mine and here is the link:
    example
    All I want to achieve is: while resizing the browser the text will stay at the bottom edge (the same as image) and it will be placed next to the photo (sth like 20 px)

    And if you could point me what is wrong with my code that ie can't see the header...
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't used the inline-block that both the above answers offered you. You can't do this with floats.

    If you only need ie8+ support then use the display:table-cell properties instead and that will allow the text to spread full width.

    Code:
    #photo,#about{
    float:none;
    display:table-cell;
    vertical-align:bottom;
    width:auto;
    }
    #about h2{margin:0}
    
    /* hacks for ie7 */
    *+html #photo,*+html #about{
    display:inline;
    zoom:1.0;
    }
    *+html #about{width:50%}
    The above code is additional and should follow at the end of the css.

    The problem with the header not displaying in iE8 is likely because you have omitted the opening body tag.

    Code:
    </head>
    <body>
    <header>
    You also have a stray bracket here in the css:

    Code:
    .cell {
    	display:inline;
    	margin-right: 0.8%;
    	width: 67%;
    }
    }
    .cell4 {
    	margin-right: 0.8%;
    	width: 67%;
    }

  8. #8
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You haven't used the inline-block that both the above answers offered you. You can't do this with floats.

    If you only need ie8+ support then use the display:table-cell properties instead and that will allow the text to spread full width.

    Code:
    #photo,#about{
    float:none;
    display:table-cell;
    vertical-align:bottom;
    width:auto;
    }
    #about h2{margin:0}
    
    /* hacks for ie7 */
    *+html #photo,*+html #about{
    display:inline;
    zoom:1.0;
    }
    *+html #about{width:50%}
    The above code is additional and should follow at the end of the css.

    The problem with the header not displaying in iE8 is likely because you have omitted the opening body tag.

    Code:
    </head>
    <body>
    <header>
    You also have a stray bracket here in the css:

    Code:
    .cell {
    	display:inline;
    	margin-right: 0.8%;
    	width: 67%;
    }
    }
    .cell4 {
    	margin-right: 0.8%;
    	width: 67%;
    }

    Thanks a lot again
    I've really missed body tag!! The strange thing is that there were no error while validation...
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW


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
  •