i created 3 divs , i have to set equal height of all i tried with height:100% but its not working.all of these div have variation on them content but i need equal height of all.please help me!
<html>
<style type="text/css">
.b1{height:190px;width:150px;background:#963;float:left}
.b2{height:150px;width:150px;background:#955;float:left}
.b3{height:180px;width:150px;background:#966;float:left}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</body>
</html>
You need to set all parent elements height to 100%, in your case it will be:
body,html { height: 100%; }
Demo: http://jsfiddle.net/Cb4nU/3/
put this code in your css. i think this will help you..
.b2{
margin: 1px;
background-color: ;
height: 100px;
width:100px;
border: 1px solid ;
}
.b2 {
margin: 1px;
background-color: ;
height: 100px;
width:100px;
border: 1px solid ;
}
.b3 {
margin: 1px;
background-color: ;
height: 100px;
width:100px;
border: 1px solid ;
}
cheers...!
Wraping all 3 in a div with the height you want them to stretch to also works
http://jsfiddle.net/Cb4nU/2/
<div class="a">
<div class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa, accumsan ut volutpat id, gravida porta turpis. Duis tincidunt feugiat est nec rhoncus. </div>
<div class="b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc massa,</div>
<div class="b3">Lorem ipsum dolor sit amet</div>
</div>
.a{height:300px;}
.b1{height:100%;width:150px;background:#963;float:left}
.b2{height:100%;width:150px;background:#955;float:left}
.b3{height:100%;width:150px;background:#966;float:left}
Hi below code snippet will do the needful,
CSS:
.parent { display:table; }
.b1{ border:1px solid red; display:table-cell; width:150px;background:#963;}
.b2{ border:1px solid green; display:table-cell; height:150px;width:150px;background:#955;}
.b3{ border:1px solid blue; display:table-cell; width:150px;background:#966;}
HTML
<div class="parent">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
Changes :
Added parent container div
Removed height & float:left property from all div's in css
Added display property for all div's in css
Related
I'm trying make "the end" in the following code to appear inline with the lorem ipsum, and can't figure out how. Is it possible? I can't change the HTML structure at all. (nor can I add js, etc)
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I want it to look like this:
If you are able to make changes to the CSS, then this is an easy solution. Just use display: inline, which will make the element only take as much space as necessary (acting like a <span> element).
However, if by chance, you are unable to, then there is no way I can think of for you to achieve this given your situation.
#parent {
width: 300px;
border: 1px solid red;
}
#block1, #block2 {
display: inline;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
You need to set the two block containers to display: inline:
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
#block1, #block2 {
display: inline;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I am making flip cards which can show photos of some winners and when the card is flipped then some info about those people is shown. I am able to make those cards and even flip them. But, the problem is that in second card then we hover, the card is flipped and the information is shown beneath the card rather than on the card. Moreover, the image is also reversed and shown but, it shouldn't be showing the image once the card is flipped.
The first works fine though. So if anyone can point out the problem then it would be great help.
This is how the second card is behaving when I hover over it.
Here's the code.
<html>
<head>
<style>
.winners_table{
border: 2px solid red;
}
.winner_container {
border: 2px solid blue;
perspective: 1000px;
display: inline-block;
margin: 5px;
width: 220px;
height: 250px;
z-index: 1;
position: relative;
}
.winner{
border: 2px solid black;
transition: 0.6s;
transform-style: preserve-3d;
width: 100%;
height: 100%;
}
.winner_container:hover .winner{
transform: rotateY( 180deg );
-webkit-transform: rotateY(180deg);
}
.winner img{
border-radius: 300px;
border: 1px solid white;
margin: 0 auto;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
margin: 0 auto;
}
.winner h3{
text-align: center;
}
/* hide back of pane during swap */
.front, .back {
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr class="winners_table">
<td class="winner_container">
<div class="winner">
<div class="front">
<img src="facebook.png" alt="Winner" height="200" width="200">
<h3>Facebook</h3>
</div>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue</p>
</div>
</div>
</td>
<td class="winner_container">
<div class="winner">
<div calss="front">
<img src="facebook.png" alt="Winner" height="200" width="200">
<h3>Facebook</h3>
</div>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue </p>
</div>
</div>
</td>
</tr>
</table>
</body>
If you want to see the github repo then, it's here.
Just a misspelling. In your 2nd div you wrote
<div calss="front">
instead of
<div class="front">
Working demo.
My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
I get the following with above code:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
Please advise. Many thanks!
Remove the float on the left column.
At the HTML code, the right column needs to come before the left one.
If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)
Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.
Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).
Example HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Example here: http://jsfiddle.net/jackJoe/fxWg7/
See http://www.alistapart.com/articles/negativemargins/ , this is exactly what you need (example 4 there).
<div id="container">
<div id="content">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
#container {
width: 100%;
background: #f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: right;
Best to avoid placing the right column before the left, simply use a negative right-margin.
And be "responsive" by including an #media setting so the right column falls under the left on narrow screens.
<div style="background: #f1f2ea;">
<div id="container">
<div id="content">
<strong>Column 1 - content</strong>
</div>
</div>
<div id="sidebar">
<strong>Column 2 - sidebar</strong>
</div>
<div style="clear:both"></div>
<style type="text/css">
#container {
margin-right: -300px;
float:left;
width:100%;
}
#content {
margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
width:300px;
float:left
}
#media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}
}
</style>
Simplest and most flexible solution so far it to use table display:
HTML, left div comes first, right div comes second ... we read and write left to right, so it won't make any sense to place the divs right to left
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
.right {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
Cases examples:
// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}
// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}
I'd like to suggest a yet-unmentioned solution: use CSS3's calc() to mix % and px units. calc() has excellent support nowadays, and it allows for fast construction of quite complex layouts.
Here's a JSFiddle link for the code below.
HTML:
<div class="sidebar">
sidebar fixed width
</div>
<div class="content">
content flexible width
</div>
CSS:
.sidebar {
width: 180px;
float: right;
background: green;
}
.content {
width: calc(100% - 180px);
background: orange;
}
And here's another JSFiddle demonstrating this concept applied to a more complex layout. I used SCSS here since its variables allow for flexible and self-descriptive code, but the layout can be easily re-created in pure CSS if having "hard-coded" values is not an issue.
This is a generic, HTML source ordered solution where:
The first column in source order is fluid
The second column in source order is fixed
This column can be floated left or right using CSS
Fixed/Second Column on Right
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Fixed/Second Column on Left
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Alternate solution is to use display: table-cell; which results in equal height columns.
Hey, What you can do is apply a fixed width to both the containers and then use another div class where clear:both, like
div#left {
width: 600px;
float: left;
}
div#right {
width: 240px;
float: right;
}
div.clear {
clear:both;
}
place a the clear div under left and right container.
I have simplified it : I have edited jackjoe's answer. The height auto etc not required I think.
CSS:
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}
#leftCol {
background: #e8f6fe;
width: auto;
}
#rightCol {
float:right;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
HTML:
<div id="container">
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
I have two p tags
<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>
The Output is content1content2. My expectation is like this:
content1 content2
Can anyone help. I want one "content1" in the left p and "content2" in the right 'p'.
You can use CSS flexbox for this. Below is the minimal CSS for the requested layout:
<div style="display: flex; justify-content: space-between;">
<p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
<p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>
For longer content, you can use fixed-width columns:
<div style="display: flex; justify-content: space-between;">
<p style="flex-basis: 49.5%; background-color: papayawhip;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget luctus lacus. Cras consectetur elementum mi sed consequat.</p>
<p style="flex-basis: 49.5%; background-color: palegoldenrod;">Pellentesque aliquet condimentum augue in mattis. Praesent sagittis nisl magna, a volutpat arcu imperdiet vel. Quisque et orci sed ligula cursus luctus.</p>
<!-- 49.5% + 49.5% = 99%, remaining 1% is distributed according to justify-content -->
</div>
You could do it with floats:
<p style="margin:0;display:inline;float:left">content1</p>
<p style="margin:0;display:inline:float:right" >content2</p>
The idea of the tag <p></p> is to display a paragraph. So HTML offers you the <div></div> which is a container conecpt. So you should use Salman A's Solution, because there aren't just different tags in html for no reason. Actually you can style a paragraph with css so it is getting displayed the same as a div container, but it is not meant to be like that.
I don't want to say to you, what you have to do. I just wanna help you using the "correct" tags for the things they were made for.
What you really want is something that doesn't assume sufficent width to fit both paragraphs into one line:
* { box-sizing: border-box; }
.two { width: 30em; max-width: 100%; }
.two p { display: inline-block; max-width: 50%; }
.two p:nth-child(1) { float:left; }
.two p:nth-child(2) { float:right; }
<div class="two">
<p>This is the first paragraph of two.</p>
<p>This is the second paragraph of two.</p>
</div>
Here's another quick turnaround to achieve this:
p{
text-align: center;
}
.item p{
display: inline-block;
}
.leftContent{
text-align: left;
width: 50%;
}
.rightContent{
text-align: right;
width: 50%
}
<br>
<!--Use both P tags in the same line without space -->
<article class="item">
<p class="leftContent">Content1</p><p class="rightContent">Content2</p>
</article>
float:left, float:right.... or
width:49.9%;
display:inline;
text-align:left;
text-align:right;
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle