Jump to content

W3.css Height alignement in a container


Recommended Posts

Dear all,

 

I try to make a responsive header with an image on the left and a text on the right. But they never have the same size and I would like to avoid using px size in the style to be sure that is will stay responsive.

 

Example code:

<header>
	<div class="w3-row">
		
		<div class="w3-quarter w3-border">
			<img src="images/logo.png" alt="logo">
		</div>

		<div class="w3-rest w3-grey">
			<p class="w3-padding">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>

Result:

318928bugscss02.png

 

I though that it may be because the image is bigger than the text so I have tried to following:

<header>
	<div class="w3-row">
		
		<div class="w3-quarter w3-border">
			<img src="images/logo.png" alt="logo">
		</div>
		
		<div class="w3-rest w3-grey">
			<p class="w3-padding w3-xlarge">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>

Result:

661545bugscss01.png

How may I correct this? By example, is this possible to set a height size in % and center the image on the height of the container?

 

Many thanks in advance for your help!!!

Link to post
Share on other sites

display: flex to rescue

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style> 
.dsonesuk_flex {
    /*width: 220px;
    height: 300px;*/
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
vertical-align: middle;
}

.dsonesuk_flex > div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
vertical-align: middle;
}
.dsonesuk_flex > .logo {text-align: center;}
.dsonesuk_flex > .logo img {vertical-align: middle; display: inline; margin:0;  }
.dsonesuk_flex > .logo:before {content: ''; width: 0; vertical-align: middle; height: 100%; display: inline-block;   }
</style>
</head>
<body>

<header>
	<div class="w3-row dsonesuk_flex">
		
		<div class="w3-quarter w3-border  w3-red logo">
			<img src="http://www.w3schools.com/w3css/img_car.jpg" alt="logo" height="100">
		</div>
		
		<div class="w3-rest w3-grey">
			<p class="w3-padding w3-xlarge">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>


<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>

<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p>

</body>
</html>
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...