This question already has answers here:
CSS vertically align floating divs
(6 answers)
Closed 6 years ago.
I don't know much HTML and CSS but I was able to make a call out box.
The gap between text and button has too much gap. And I want the button to be centered between the top and bottom border. I would appreciate if someone could help.
Check out the screenshot
Here's the code
<html>
<head>
<style>
div#abc {
padding: 5px 2px 8px 5px;
border: 1px solid #dddddd;
border-radius: 10px;
line-height: 120%;
border-top:none;
}
img#def {
margin:1px 8px 2px 2px;
}
h1#ghi {
font-size:18px;
color:#7fbdcb;
margin:0px;
font-face:"Raleway";
}
img#ggg {
font-size:18px;
color:#7fbdcb;
margin:4px;
float:right;
background-color:blue;
}
.button {
background-color: #7fbdcb;
border: none;
color: white;
padding: 6px 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
float: right;
margin-top: 12px;
margin-right: 4px;
margin-left: 0px;
}
.button:hover {
background-color: #6ea5b1;
}
</style>
</head>
<body>
<div id="abc"><img id="def" src="http://www.goodisle.com/wp-content/uploads/2014/03/raise-1.jpg" style="width:60px; height:60px; float:left;"><button class="button">Submit</button>
<h1 id="ghi">Submit your email</h1>
<p style="size:5px;">Cliche scenester Wes Anderson, Etsy Vice mustache.Cliche scenester Wes Anderson, Etsy Vice mustache.</p>
</div>
</body>
</html>
You either need to adjust the margin-top accordingly, which is a hack.
* {margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
.btn {padding: 5px; text-decoration: none; border: 1px solid #ccc; color: #333; margin: 5px;}
.position,
.hack-type {border: 1px solid #999; margin: 10px; padding: 10px;}
.hack-type .btn {float: right; margin-top: 22px;}
<div class="hack-type">
Hello
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut accusamus esse distinctio iusto omnis reiciendis numquam eaque sunt laudantium. Alias explicabo nihil consectetur qui nemo cumque, quisquam iusto laborum.</p>
</div>
And using positioning, you can perfectly place it:
* {margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
.btn {padding: 5px; text-decoration: none; border: 1px solid #ccc; color: #333; margin: 5px;}
.position,
.hack-type {border: 1px solid #999; margin: 10px; padding: 10px;}
.hack-type .btn {float: right; margin-top: 22px;}
.position {position: relative; padding-right: 100px;}
.position .btn {position: absolute; right: 5px; top: 50%; transform: translate(0, -50%);}
<div class="position">
Hello
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut accusamus esse distinctio iusto omnis reiciendis numquam eaque sunt laudantium. Alias explicabo nihil consectetur qui nemo cumque, quisquam iusto laborum.</p>
</div>
Related
I am trying to make a vertical navigation bar. I have made a navbar.I want to set it's height to full page but i am not able to do that even when is set height:100% in CSS. I want content like para to be displayed on its left side.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
I tried to change the display: parameter of the unordered list to display:inline and also the display: parameter of div tag to display:inline How do I set the height to full page and also display content on its left side.
When you use height:100%; it means that you want that element to be 100% of its parent which in your case is body, and as height is not defined for it so it is auto. all you need to do is to add min-height:100vh for the body. It will solve your problem for full height navbar.
Now your next objective is to make the text to wrap around it, which can achieved by floating your navbar to left. This will make the next elements to wrap around it.
Setting div to display:inline; won't be a good thing to do just for achieving this result, because the moment you add next div it will start creating problems.
body {
margin: 0;
height: 100vh;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
float: left;
margin-right: 10px;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
<body>
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</body>
My suggestion is to use Bootstrap or for understanding you can do it like this also:
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 20vw;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
</style>
</head>
<body>
<div style="float: left; width: 20vw;">
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div style="float: right;width: 75vw">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</div>
</body>
</html>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 1 year ago.
Div with class name main goes to the next line. I don't need it. It's wrong. I've vertical navbar with display block. I don't know why it goes to the next line.
Here's HTML code:
/* Nav */
nav {
padding-left: 30px;
padding-top: 30px;
height: 100vw;
width: 290px;
border-right: 1px solid #333333;
}
.nav__link {
color: #FFFFFF;
width: 250px;
display: block;
border-radius: 8px;
padding: 6px 0px 6px 30px;
transition: background-color .2s linear;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
}
.nav__link:hover {
background-color: #707070;
}
/* Main */
.main {
margin-left: 300px;
}
<!-- Nav -->
<nav>
Project 1
Project 2
Project 3
Project 4
</nav>
<!-- Main -->
<div class="main">
<div class="project">
<h1 class="project__name">Project 1</h1>
<p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
</div>
</div>
Any ideas to solve this problem, guys?
Add display: flex; to their parent, which is currently <body>:
body {
display: flex;
}
block elements take up entire width, so nav will push the <div> to next line by default.
Side note: I recommend using more semantic elements like <aside> and <main>
/* Nav */
body {
display: flex;
}
nav {
padding-left: 30px;
padding-top: 30px;
height: 100vw;
width: 290px;
border-right: 1px solid #333333;
background: grey;
}
.nav__link {
color: #FFFFFF;
width: 250px;
display: block;
border-radius: 8px;
padding: 6px 0px 6px 30px;
transition: background-color .2s linear;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
}
.nav__link:hover {
background-color: #707070;
}
/* Main */
main {
margin-left: 300px;
}
<aside>
<nav>
Project 1
Project 2
Project 3
Project 4
</nav>
</aside>
<!-- Main -->
<main>
<div class="project">
<h1 class="project__name">Project 1</h1>
<p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
</div>
</main>
I'm trying to get the #bigimage and #textarea elements to sit closer together, but then still be centered when laid out as col-12 on a small screen.
Should I use a media query for this? I've tried putting them in a separate container, but strange stuff starts happening when I test that on a small screen.
The colored borders in my attempt below are for my own clarity. I'm just a beginner so if you have any other comments about my code I'd really appreciate it.
header {
border: 3px solid red;
text-align: center;
margin-top: 30px;
}
li {
display: inline;
text-align: center;
padding: 3%;
}
img {
width: 300px;
}
ul {
border: 2px solid green;
margin-bottom: 20px;
margin-top: 40px;
}
h2 {
border: 2px solid yellow;
margin-top: 30px;
}
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 30px;
width: 200px;
}
#bigimage {
border: 3px solid green;
text-align: center;
}
p {
border: 2px solid red;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 300px;
margin: 0 auto;
}
#mainstuff {
width: 50% margin: 0 auto;
border: 3px solid yellow;
}
.container {
border: 5px solid blue;
}
.row {
margin-top: 30px;
position: relative;
}
img {
border: 2px solid red;
}
#textandphoto {
width: 800px;
}
#media (min-width: 1500px) {
.container {
max-width: 900px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1>Raphael Hetherington</h1>
<h2>11+ Tutor</h2>
<ul>
<li>About Me</li>
<li>11+ Tuition</li>
<li>Programming</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<div class="row" id="mainstuff">
<div class="col-12 col-md-6" id="bigimage">
<img src="//lorempixel.com/400/200/abstract/5/" alt="">
</div>
<div class="col-12 col-md-6" id="textarea">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis harum nesciunt repellendus laudantium quam quo ea, placeat, totam rem laboriosam vero, asperiores architecto. Dolores earum, architecto nemo molestiae quo. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Corporis accusamus modi eaque placeat voluptates nihil quasi non et similique magnam architecto itaque nobis expedita amet, provident doloribus eveniet quis explicabo?</p>
</div>
</div>
</div>
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 0; /* 0 instead of 30px*/
width: 200px;
}
I hope you can give me a hand.
What I'm Trying to do in a mobile version it's to leve the menu bar always visible using position fixed to the visitor and it work's fine, the issue is that the second div called aside it shows behind the menu bar and I really do not know how to show it after the menu bar.
I'm working in a 500px mobile version.
How can I fix this ?
I hope you can help me
....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin tÃtulo</title>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 1000px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
background-color: #f1f1f1;
height: 1000px;
max-width: 950px;
}
header{
height: 150px;
border-color: red;
border-style: dotted;
margin-bottom: 5px;
}
aside{
height: 200px;
border-color: blue;
border-style: dotted;
margin-bottom: 5px;
}
section{
height: 200px;
border-color: yellow;
border-style: dotted;
margin-bottom: 5px;
}
article{
height: 200px;
border-color: deeppink;
border-style: dotted;
margin-bottom: 5px;
}
footer{
height: 200px;
background-color: green;
border-style: dotted;
}
nav{
width: 100%;
float: left;
}
nav ul{
list-style: none;
padding: 0;
overflow: hidden;
margin-top: 56px;
}
nav ul li{
padding: 10px;
display: inline-block;
overflow: hidden;
}
nav ul li a{
color: red;
}
.menu {
display: none;
}
#media screen and (max-width:700px){
.container{
background-color: deeppink;
}
}
#media screen and (max-width:500px){
body{
margin: 0;
}
.container{
background-color: #CCCCCC;
width: 100%;
}
header{
margin-bottom: 5px;
border-style:none;
height: auto;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
}
.menu .icon-menu{
color: #fff;
padding: 10px;
font-size: 28px;
}
.menu .menu_txt{
color: #fff;
float: right;
padding: 10px;
font-size: 18px;
margin-top: 5px;
margin-right: 5px;
}
nav{
background-color: #595959;
height: 100%;
position: fixed;
width: 90%;
display: none;
}
nav ul{
border-color: deeppink;
margin-top: 0px;
}
nav ul li{
background-color: #3E3E3E;
display: block;
margin-top: 0px;
width: 100%
}
aside{
margin-top: 0px;
}
}
</style>
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<div class="menu">
<div class="menu_txt">MENU</div>
<div class="icon-menu"></div>
</div>
<nav>
<ul>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
</nav>
</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id excepturi nesciunt in modi ratione alias vero ipsam optio quod quaerat fugiat est nihil temporibus, earum, necessitatibus ducimus hic cumque inventore?</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, incidunt necessitatibus asperiores quibusdam voluptas eos doloremque vitae consectetur earum facilis repudiandae ullam quisquam perferendis tempora. Illo, officia atque natus itaque.</section>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis necessitatibus explicabo obcaecati cum minima mollitia quam assumenda perferendis dicta. Cumque placeat, aliquam itaque ad quia accusamus autem tempora ex fugit.</article>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus at natus pariatur eligendi possimus ipsa corporis rem rerum omnis, perferendis, earum vero dolorum optio, nihil odit dolores autem asperiores recusandae!</footer>
</div>
</body>
</html>
In your media query, add margin top or padding top to your body to push the content below the menu then add top: 0; to your menu to make sure it stays at the top.
http://codepen.io/anon/pen/JWwRmN
#media screen and (max-width:500px){
body{
margin: 0;
margin-top: 50px;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
top: 0;
}
Well basically I'm creating some forums, and for example we're looking at a thread and the user information is on the left, and the content of the thread is on the right, and then under is the user's signature.
Now, I'm trying to get the user information on the left to stretch down to the height of its container...
http://prntscr.com/7dbdww
.topic {
width: 100%;
display: inline-block;
border: 1px solid #444;
margin-bottom: 20px;
position: relative;
}
.topic-header {
width: 100%;
height: 40px;
display: block;
background-color: #CD422B;
border-left: 1px solid #CD422B;
border-right: 1px solid #CD422B;
}
.topic-header h4 {
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
font-weight: 700;
padding-left: 10px;
line-height: 40px;
margin: 0;
}
.topic-userinfo {
width: 20%;
min-height: 200px;
display: inline-block;
position: relative;
float: left;
left: 0;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
.topic-usersig {
width: 80%;
height: 150px;
max-height: 300px;
display: inline-block;
overflow-y: auto;
position: relative;
float: right;
right: 0;
background-color: #323232;
border-top: 1px dashed #444;
}
.topic-body {
width: 80%;
min-height: 200px;
display: inline-block;
position: relative;
float: right;
right: 0;
background-color: #323232;
color: #fff;
}
That's css ^ here's html
<div class="topic">
<div class="topic-header">
<h4><i class="fa fa-fw fa-comment"></i> Test</h4>
</div>
<div class="topic-userinfo">
<div class="userinfo-box">
<center>
<span class="userinfo-name admin-color">
deaL
</span>
<span class="userinfo-rank">
Administrator
</span>
<img src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" style="border: 1px solid #333; width: 90px; height: 90px;">
</center>
</div>
<center>
Joel Evans
</center>
</div>
<div class="topic-body">
<div class="topic-content">test2</div>
</div>
<div class="topic-usersig">
<div style="margin: 10px"></div>
</div>
</div>
use these css for parent
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
use these css for child
.child {
background:blue;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Just setting the height alone to 100% didn't work for me. I also changed the position to absolute for that div.
CSS
.topic-userinfo {
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
float: left;
left: 0;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
JSFiddle
Some serious issues with this code, and most of the answers as well:
The <center> tag has been deprecated for a very, very long time. Use the CSS text-align property.
Using float: right / left and display: inline-block together doesn't make sense. The computed value of display will be block, regardless.
Using float and then position: absolute also makes no sense. The computed value of float will be none.
Using display: inline-block on elements that are clearly intended as block level elements.
Percentage width on a sidebar that contains elements with a fixed width. That won't scale down nicely.
Rogue inline styles.
Your CSS is muddled, because your markup is structured poorly. By balancing your markup and styles, you can achieve the intended look without so much hacking about on either side. Sometimes more is less.
Here's a simple example where the .topic-user-info will always match the height of the .topic-message and .topic-signature elements combined. No floats, only one position: absolute, and some nice, semantic markup.
DEMO
.topic {
width: 100%;
border: 1px solid #444;
}
.topic-header {
width: 100%;
height: 40px;
background-color: #CD422B;
}
.topic-content {
padding-left: 180px;
position: relative;
box-sizing: border-box;
width: 100%;
color: white;
}
.topic-user-info {
position: absolute;
width: 180px;
height: 100%;
left: 0;
background-color: #444;
text-align: center;
}
.topic-body {
width: 100%;
background-color: #323232;
}
.topic-message,
.topic-signature {
padding: 10px;
box-sizing: border-box;
}
.topic-message {
min-height: 180px;
}
.topic-signature {
min-height: 120px;
border-top: 1px dashed #444;
}
<div class="topic">
<header class="topic-header">Header</header>
<section class="topic-content">
<div class="topic-user-info">User Info</div>
<article class="topic-body">
<div class="topic-message">
<p>Message</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed et deleniti rem, odio sit perspiciatis quasi dignissimos repellat inventore sequi cupiditate vel quam, asperiores nisi magni, quaerat at autem id dolorem! Dolor, nobis! Fuga nisi aut deserunt in delectus nam quidem ea asperiores, animi nihil. Delectus, ab nisi. Possimus, laborum quos impedit atque eius ex ab enim a amet omnis ullam totam facere sed necessitatibus aut nihil reprehenderit sequi optio doloremque rerum voluptatum ea adipisci minus, molestias modi. Numquam iste, ducimus consequatur deleniti dolores explicabo. Doloremque odio placeat deleniti ipsam consequatur beatae eius doloribus reiciendis ut sit unde distinctio modi voluptates expedita sint ad, earum asperiores aliquid est architecto autem in, quibusdam officiis! Distinctio, eos quaerat, id illum aliquam aut.</p>
</div>
<aside class="topic-signature">
<p>Signature</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti delectus laudantium minima magni temporibus distinctio, aut modi saepe deserunt praesentium eligendi qui quod, ratione omnis exercitationem officiis repellendus adipisci eum molestias vitae, sed. Atque dicta in veniam ducimus voluptatem quasi accusantium, temporibus esse, aliquid itaque explicabo omnis, delectus expedita rem.</p>
</aside>
</article>
</section>
</div>
Use height:100%
.topic-userinfo {
width: 20%;
min-height: 200px;
display: inline-block;
height:100%;
position: relative;
float: left;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
Marks Answer is almost perfect, except that it stretches a bit to far because of the header. If we offset for the header, it's perfect.
.topic-userinfo {
width: 20%;
height: calc(100% - 40px);
display: inline-block;
position: absolute;
float: left;
left: 0;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
https://jsfiddle.net/1pntme1x/1/
The main issue at hand is that you need the left-floated child .topic-user-info to take 100% height of the parent. But the parent's height is auto by default, meaning it will adjust its height to fit the children. And that is why simply putting height:100% on the floated left child won't work.
The solution is to absolutely position the left child, and float the thread content and signature to the right. If your markup is done properly, it becomes very easy to do. I personally think the HTML is pretty poor - non-semantic tags, use of deprecated tag <center>, plenty of inline styles. The best thing to do would actually be to rewrite them.
* {
box-sizing: border-box;
}
.topic {
width: 100%;
display: inline-block;
border: 1px solid #444;
margin-bottom: 20px;
position: relative;
}
.topic-header {
display: block;
width: 100%;
height: 40px;
background-color: #CD422B;
border-left: 1px solid #CD422B;
border-right: 1px solid #CD422B;
}
.topic-header h4 {
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
font-weight: 700;
padding-left: 10px;
line-height: 40px;
margin: 0;
}
.topic-user-info {
position: absolute;
padding: 0 10px;
height: calc(100% - 40px);
width: 20%;
min-width: 130px;
background-color: #555;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.topic-user-info > .public-profile {
position: relative;
margin: 10px auto;
background-color: #fff;
}
.topic-user-info > .public-profile > .screen-name {
color: red;
}
.topic-user-info > .public-profile > .rank {
color: #000;
}
.topic-user-info > .public-profile > .avatar {
width: 90px;
height: 90px;
border: 1px solid #333;
}
.topic-body {
float: right;
width: 80%;
min-height: 500px;
background-color: #323232;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
}
.topic-content {
padding: 20px;
min-height: 200px;
}
.topic-usersig {
padding: 20px;
height: 150px;
max-height: 300px;
background-color: #323232;
border-top: 1px dashed #444;
}
<article class="topic">
<header class="topic-header">
<h4>Test</h4>
<!-- maybe other things in header -->
</header>
<section class="topic-user-info">
<article class="public-profile">
<div class="screen-name">deaL</div>
<div class="rank">Administrator</div>
<img class="avatar" src="http://www.skruffysdeveloper.com/assets/img/user_img_default.png" alt="" />
</article>
<div class="user-real-name">Joel Evans</div>
</section>
<section class="topic-body">
<section class="topic-content">
<h3>Test2</h3>
</section>
<section class="topic-usersig">
Some signature here
</section>
</section>
</article>
height 100% some times doesn't seem to work as it should . We can use a small Js function to handle this.
We have added same class 'EqHeightDiv' to both the divs which we want to have same heights. then add following code in document ready js .
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight($(".EqHeightDiv"));
the Function will return the height of tallest div from the two divs and append that height to the shorter div.