1)
<div class="testimonials">
<div class="content">
<p>Content ONE</p>
<p>Content TWO</p>
<p>Content THREE</p>
</div>
</div>
<div class="other-content">
<p>Content Here</p>
</div>
2)In above code i have give position:absolute to <p></p> tag, so the other-content class content is not displayed under the content class.
3)I need other-content content will be displayed below the other-content class.
4)please don't use height, solve the issue.
5)Please check the below link.
6)Here is the fiddle.
Thanks in advance.
remove the position from .content p
try this..
.content p{
width: 50%;
background-color: #eee;
float: left;
padding: 15px;
}
FIDDLE
Wrap the both divs (testimonials and other-content) in an extra wrapper div and then set position:absolute on that wrapper.
FIDDLE
.wpr {
position: absolute;
}
<div class="wpr">
<div class="testimonials">
<div class="content">
<p>Content ONE</p>
<p>Content TWO</p>
<p>Content THREE</p>
</div>
</div>
<div class="other-content">
<p>Other Content Here</p>
</div>
</div>
Related
I'd like to make some sort of a program page for a festival. I want to create a list of images with little text underneath. I don't succeed in placing the text underneath (it always ends up next to the images instead of underneath). Can somebody help?
It should look like this:
[img1] [img2] [img3]
[text1] [text2] [text3]
[img4] [img5]
[text4] [text5]
... and so on
The size of the images is fixed, so that the rows with only 2 images are the same size as those who have 3.
This is my code in CSS thus far:
For the texts (small and big):
.prog_big{width:321px; height:434px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left; text-align:center}
.prog_small{width:207px; height:283px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left;text-align:center}
For the images (small and big):
.poster_big{width:321px; height:434px; margin-left:30px; float:left}
.poster_small{width:207px; height:283px; margin-left:30px; float:left}
I don't this this is a css issue really. You can achieve this in HTML with this type of layout
<figure>
<img src="your_Image">
<figcaption>text here</figcaption>
</figure>
Division and image tags are not inline element. Because of this reason they will create a new line in the screen for each of them.
Make them inline, using the css "display:inline-block". They will stand side by side.
div.first-row div, div.second-row div {
display:inline-block;
float:left;
width:100%;
}
div.first-row div {
width: 33.3%;
}
div.second-row div {
width: 50%;
}
div img {
width:100%;
height:auto;
}
p {
text-align:center;
}
<div class='first-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
<div class='second-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
A flexbox solution:
.row {
display: flex;
flex-flow: row;
justify-content: flex-start;
}
.column {
display: flex;
flex-flow: column;
justify-content: flex-start;
margin-right: 10px;
}
p {
width: 100%;
text-align: center;
}
<div class="row">
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 1</p>
</div>
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 2</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 3</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 4</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 5</p>
</div>
</div>
I want to vertically centre <div> tags that have a horizontal margin between each other.
The problem is that this behavior appears to be inconsistent between text-align: center and text-align: -webkit-center or text-align: -moz-center:
.parent {
display: inline-block;
border: 1px dotted #fd0;
position: relative;
}
.parent.ta {
text-align: center;
}
.parent.browser-ta {
text-align: -webkit-center;
text-align: -moz-center;
}
.child {
display: inline-block;
vertical-align: top;
}
.child > .content {
display: block;
margin: 0 10px;
border: 1px solid #888;
width: 200px;
text-align: left;
}
.wrong {
background-color: #e00;
color: #fff;
}
.right {
background-color: #0a3;
color: #fff;
}
<div>
Using <tt>text-align: center</tt>;
<div class="parent ta">
<div class="child">
<div class="content wrong">child 1 LEFT</div>
<div class="parent ta">
<div class="child">
<div class="content">child a</div>
</div>
<div class="child">
<div class="content">child b</div>
</div>
<div class="child">
<div class="content">child c</div>
</div>
</div>
</div>
<div class="child">
<div class="content wrong">child 2 LEFT</div>
<div class="parent ta">
<div class="child">
<div class="content">child d</div>
</div>
<div class="child">
<div class="content">child e</div>
</div>
<div class="child">
<div class="content">child f</div>
</div>
</div>
</div>
<div class="child ">
<div class="content right">child 3 CENTRE</div>
</div>
</div>
</div>
<br>
<br>
<div>
Using <tt>text-align: -vendor-center</tt>
<div class="parent browser-ta">
<div class="child">
<div class="content right">child 1 CENTRE</div>
<div class="parent browser-ta">
<div class="child">
<div class="content">child a</div>
</div>
<div class="child">
<div class="content">child b</div>
</div>
<div class="child">
<div class="content">child c</div>
</div>
</div>
</div>
<div class="child">
<div class="content right">child 2 CENTRE</div>
<div class="parent browser-ta">
<div class="child">
<div class="content">child d</div>
</div>
<div class="child">
<div class="content">child e</div>
</div>
<div class="child">
<div class="content">child f</div>
</div>
</div>
</div>
<div class="child">
<div class="content right">child 3 CENTRE</div>
</div>
</div>
Run that snippet and the two similar HTML and CSS produce different layouts in Chrome (Webkit/Blink) and FireFox. The red panels are in the wrong location, the green ones are correct.
So text-align: -webkit-center and text-align: -moz-center appear to be correct (to me) but text-align: center appears to be bugged in both browsers.
Digging out the venerable old <centre> tag (that we're not supposed to use) and that works right too (though examining it reveals it uses the browser prefix too).
Is this correct? Is this a bug? Is there a reason for the difference? Which one should I use?
The prefixed values are described by MDN to be "block alignment values", which means block boxes themselves are aligned in addition to the inline content within them. This is the exact behavior of the <center> element, and the prefixed values are in fact intended for that element — if you look in the UA stylesheets for each engine you'll find a ruleset that says exactly center { display: block; text-align: -vendor-center; }.
The reason text-align: center is not implemented this way is because text-align is designed to affect inline-level boxes (as evidenced by the "text-" in its name), not block-level boxes. But that, I suspect, is not the answer you're really looking for.
What's happening is that the boxes that are actually being aligned in your snippet are the .content elements, which are block boxes, not inline-blocks. The reason that last element is being centred is because its parent, an inline-block, is being shrink-wrapped, and itself then centred by the text-align: center declaration in its ancestor.
I have a jsfiddle here - http://jsfiddle.net/ktmzk3jk/
I'd like to make the red background on the blocks the same height.
I'm sure I could do it with Jquery but is there a standard CSS soultion.
<div class="container">
<div class="row">
<div class="col-sm-4 col">
<div class="block">
<h3>65%</h3>
<p>Some Text Some Text</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="block">
<h3>20%</h3>
<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="block">
<h3>5%</h3>
<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
</div>
</div>
</div>
</div>
Try like this DEMO
CSS:
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
HTML:
<div class="row">
<div class="row-same-height row-full-height">
<div class="col-sm-4 col-xs-height col-full-height">...</div>
</div>
</div>
You shouldn't style that inner <div class="block"> , in fact you shouldn't even have it there;
directly style the .col selector,
here you have a fiddle.
For equal size red blocks, you need to update value of height in .block, set height to height:150px instead of height:100% if you know the maximum height. Otherwise also include overflow:auto; so that a scroll appears if text goes beyond the boundary
Updated JS Fiddle: http://jsfiddle.net/ktmzk3jk/8/
Adding a min-height to would be the best approach but I would recommend a jQuery approach. Especially if the content changes to different lengths often.
I use the twitter bootstrap and I wanted to align verticaly a div block with a picture and the text at the right.
Here is the code:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
I tried this but not wortks:
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
I tried this too:
.span6 .row .span3{display: inline-block; vertical-align: middle;}
None is working. Does somebody have an idea?
Thanks in advance.
Try this:
.row > .span3 {
display: inline-block !important;
vertical-align: middle !important;
}
Edit:
Fiddle: http://jsfiddle.net/EexYE/
You may need to add Diego's float: none !important; also if span3 is floating and it interferes.
Edit:
Fiddle: http://jsfiddle.net/D8McR/
In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).
Try removing the float attribute from span6:
{ float:none !important; }
If I remember correctly from my own use of bootstrap, the .spanN classes are floated, which automatically makes them behave as display: block. To make display: table-cell work, you need to remove the float.
As well as the previous answers are you could always use the Pull attrib as well:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
i use this
<style>
html, body{height:100%;margin:0;padding:0 0}
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
I have a really, really simple CSS question that has already been asked here a thousand times already in different forms, and seems to have no definitive answer.
I just want to create three columns on an HTML page, using CSS. Doesn't matter about fixed-width versus liquid: just need three columns.
Here's a complete HTML page:
<html>
<body>
<div id="left" style="float:left; width:300px;">
<h3>Column 1</h3>
</div>
<div id="right" style="float:right; width:300px;">
<h3>Column 3</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
</body>
</html>
In Chrome, at least, this is pushing the left & right columns down below the middle. What is wrong?
like this?: http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/
just float everything left, and have the columns flow in the normal order in your HTML.
<div id="left">
<h3>Column 1</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
<div id="right">
<h3>Column 3</h3>
</div>
css:
#left {
background-color: red;
float:left;
width:200px;
}
#middle {
background-color: salmon;
float:left;
width:200px;
}
#right {
background-color: pink;
float:left;
width:200px;
}
if you don't want them to wrap, you can wrap a container div around them, or use
body {
width: 600px; /*combined width of three columns*/
margin: 0 auto;
}
http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/1/
float is sensitive to order. Put the left, then middle, then right.
Have you tried floating the middle section too?
You might try this
<html>
<body>
<div id="left" style="float:left; width:300px;border:1px solid black;">
<h3>Column 1</h3>
</div>
<div id="middle" style='float:left;width:600px;border:1px solid black;'>
<h3>Column 2</h3>
</div>
<div id="right" style="float:left; width:300px;border:1px solid black;">
<h3>Column 3</h3>
</div>
</body>
</html>