How to style this?

HTML & CSS
1

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?

2

This isn’t perfect, but here’s my first quick attempt at it:


<!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

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.

4

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. :slight_smile:

5

is this what you were aiming for?


<!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

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…

7

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.


#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.


</head>
[B]<body>[/B]
<header>

You also have a stray bracket here in the css:


.cell {
	display:inline;
	margin-right: 0.8%;
	width: 67%;
}
[B]}[/B]
.cell4 {
	margin-right: 0.8%;
	width: 67%;
}
8

Thanks a lot again :slight_smile:
I’ve really missed body tag!! The strange thing is that there were no error while validation…