I've searched for the past two hours and really can't figure this one out. Heights of elements have always been a major pain in the ass for me, I can't help it.
Basically I have two div elements (column1 and column2) and I want them to be the height of their parent div (columns).
I have a few assumptions :
I don't know the height of the parent div element
I don't know which div element holds the biggest content. (i.e. it's not always column1 that has more content than column2)
I am not putting a background picture (the faux column hack method won't work)
Thanks in advance to the CSS God (or Goddess, it is still possible on Neowin :p) who will teach me this one
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS - 2 columns</title>
<style type="text/css">
html, body {
color: #FFF;
font-family: Verdana;
}
div.columns {
height: auto;
}
div.column1 {
float: right;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 10px;
margin-left: -50px;
width: 200px;
text-align: center;
background-color: #003366;
-moz-border-radius: 25px;
border-radius: 25px;
border-bottom-right-radius: 25px;
height: 100%;
}
div.column2 {
text-align: justify;
background-color: #336699;
padding: 10px;
margin: 0px 10px 20px;
font-size: 16px;
-moz-border-radius: 25px;
border-radius: 25px;
height: 100%;
}
</style>
</head>
<body>
<div class="columns">
<div class="column1">
bla bla bla<br>bla bla bla
</div>
<div class="column2">
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
</div>
</div>
</body>
</html>
Question
PyX
Hi guys,
I've searched for the past two hours and really can't figure this one out. Heights of elements have always been a major pain in the ass for me, I can't help it.
Basically I have two div elements (column1 and column2) and I want them to be the height of their parent div (columns).
I have a few assumptions :
Thanks in advance to the CSS God (or Goddess, it is still possible on Neowin :p) who will teach me this one
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS - 2 columns</title> <style type="text/css"> html, body { color: #FFF; font-family: Verdana; } div.columns { height: auto; } div.column1 { float: right; padding-top: 10px; padding-bottom: 10px; margin-right: 10px; margin-left: -50px; width: 200px; text-align: center; background-color: #003366; -moz-border-radius: 25px; border-radius: 25px; border-bottom-right-radius: 25px; height: 100%; } div.column2 { text-align: justify; background-color: #336699; padding: 10px; margin: 0px 10px 20px; font-size: 16px; -moz-border-radius: 25px; border-radius: 25px; height: 100%; } </style> </head> <body> <div class="columns"> <div class="column1"> bla bla bla<br>bla bla bla </div> <div class="column2"> bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br> </div> </div> </body> </html>Link to comment
Share on other sites
9 answers to this question
Recommended Posts