Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.
Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT
Yes, i have searched and have surprisingly not found an adequate answer:
vertical-align with Bootstrap 3
does not help for example as i am trying to align the text, not the div.
thanks, airyt
You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need.
The HTML code:
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div>
<div class="col-sm-6 bottom-align">
This text needs to be (bottom) ed with Text A in previous cell.
</div>
</div>
</div>
and the CSS styling:
.row {
position: relative;
}
.bottom-align {
position: absolute;
bottom: 0px;
right: 0;
border-bottom: 1px solid red;
}
.border{
border-bottom: 1px solid blue;
}
Please check the fiddle:
http://jsfiddle.net/johannesMt/craLuLpb/
You can't vertically align floated wrappers, you need to change it to inline element.
DEMO
.col-sm-6 {
display: inline-block;
vertical-align: bottom;
float: none;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div><div class="col-sm-6">
This text needs to be (bottom) aligned with Text A in previous cell.
</div>
</div>
</div>
Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name
Related
I have a 2 row layout, with 1 column in the first row, and three columns in the second row. The text is aligned left in the one column, and the three columns in the second row are all center aligned like so:
What I want to do is to somehow align the text in the one column with the left edge of the first item in the 3 column layout, but I'm not sure if this is possible? (at least not without using js). Is there a simple way to do this using the bootstrap classes?
You can put the top text inside the same container as 'Centered 1', and then move it up using position:absolute. See fiddle: https://jsfiddle.net/avgh4x67/.
HTML:
<div id='above'></div>
<div class='container'>
<div class='row'>
<div class='col-sm-4'>
<div>
Centered 1
<div id='centered-1-aligned'>aligned</div>
</div>
</div>
<div class='col-sm-4'>
<div>Centered 2</div>
</div>
<div class='col-sm-4'>
<div>Centered 3</div>
</div>
</div>
</div>
CSS:
#above {height: 80px; border: solid 3px red; margin-bottom: 10px;}
.col-sm-4 {text-align:center; border: solid 3px red; }
.col-sm-4 > div {display:inline-block;}
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}
I have center aligned 3 svg's. The user selects which of them gets displayed from backend and the rest are hidden. I want to keep these images center aligned. Right now if one or more images are hidden, it lefts empty space for that area. I am using opacity to hide the items
Code:
<div class="parent">
<div class="work--service_provided">
1
</div>
<div class="work--service_provided" style="display:none;">
2
</div>
<div class="work--service_provided">
3
</div>
</div>
.work--service_provided{
text-align: center;
display: inline-block;
margin: auto;
}
Fiddle.
Two way of doing it:
add the following to your css
.parent{
text-align: center;
}
https://jsfiddle.net/dalinhuang/eret23y8/4/
add align="center" to your parent
<div class="parent" align="center">
https://jsfiddle.net/dalinhuang/eret23y8/3/
Laying out child columns where leftmost and rightmost columns stick to left and right border of parent container
has always been a challenge to me (image attached) and I would like to know the correct way (the way in which an experienced designer would do it) to doing it in css.
As in the the link image, there are 4 child column .
https://dl.dropboxusercontent.com/u/27899629/stack/treatment-block.png
The way I coded it:
CSS
#treatments-block {
background-color: #FAF1E2;
min-height: 400px;
}
.treatment-row {
margin-top: 10px;
border: 1px solid red;
overflow: auto;
}
.treatment {
width: 17%;
margin-right: 10%;
float: left;
}
.treatment img {
max-width: 100%;
}
HTML
<div id="treatments-block">
<div class="centrewrap">
<div class="section-title light-brown-color">SKIN TREATMENTS AVAILABLE</div>
<div class="treatment-row" style="margin-top:0">
<div class="treatment">
<img src="images/botox-fillers-thumb.jpg">
<h3>Botox & Fillers</h3>
<p>Some cool text in here some cool text in here..</p>
</div>
<div class="treatment">
<img src="images/botox-fillers-thumb.jpg">
<h3>Botox & Fillers</h3>
<p>Some cool text in here some cool text in here..</p>
</div>
<div class="treatment">
<img src="images/botox-fillers-thumb.jpg">
<h3>Botox & Fillers</h3>
<p>Some cool text in here some cool text in here..</p>
</div>
<div class="treatment" style="margin-right:0;">
<img src="images/botox-fillers-thumb.jpg">
<h3>Botox & Fillers</h3>
<p>Some cool text in here some cool text in here..</p>
</div>
</div>
</div>
</div>
To style the last element of a parent element, you can use the :last-child pseudo class. In your example like this:
CSS:
.treatment-row{margin-top:10px;border:1px solid red;overflow:auto;}
.treatment{width:22%; margin-right: 4%; float:left;}
.treatment img{max-width:100%}
.treatment:last-child{float:right; margin-right: 0}
Note: the name "last-child" is a little missleading, because it doesn't refer to the last child of an element, but to the last child of the parent element. E.g.:
For a list of lis in a ul, you need to use li:last-child to select the last li in that list
I am building a website with Zurb Foundation. I want to include a DIV. This div will have two columns. The left column will show an image. The second column will hold a paragraph and a button. I want the button to be vertically aligned against the bottom of the grid. In other words, I want the bottom of my button to align with the bottom of my image. Currently, I am trying the following:
<div class="sample">
<h1>This is the title</h1>
<ul class="inline-list">
<li>John Smith</li>
<li>October 12, 2013</li>
</ul>
<div class="row">
<div class="large-5 columns">
<div>
<img src="/images/paper.jpg" style="width:100%;" />
</div>
</div>
<div class="large-7 columns" style="background-color:yellow;">
<p>A paragraph will go here</p>
<a class="button small" href="[someUrl]">
<span>keep reading</span>
<span class="icon-arrow-right5" style="font-weight:lighter; vertical-align:middle;"></span>
</a>
</div>
</div>
</div>
I can't get the "keep reading" button to vertically align with the bottom of the image in the left column. Is there a way to do this in Zurb Foundation? If so, how?
The easiest way to get this done is to float two containers (one for image and one for text) next to each other, with a paragraph text box and a button box inside of the text container.
Give the paragraph box a max-height that would approximate about 70-80% of your image's height (depending on how wide the paragraph box is) and put an overflow:hidden; on it in case your text runs long and you don't want your layout breaking. Place the button below the fixed height paragraph box with a simple top margin and you should be good.
You could align these boxes I've made with Zerb's grid to get this done, but Zerb's grid has horizontal columns only: you'll have to add in these vertical alignments to achieve your goal.
Check the code out here:
http://jsfiddle.net/73fct/2/
HTML:
<div class="container">
<div class="image-box">
<img src="http://nutritionwonderland.com/wp-content/uploads/2010/10/bee-emrank-flickr-300x300.png" width="300" height="300" alt="A Honey Bee" />
</div>
<div class="text-box">
<p class="paragraph">
Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens.
</p>
<div class="button">Bees!</div>
</div>
</div>
CSS (backgrounds on the elements are just to show structure for you):
.container {
min-width: 480px;
}
.image-box {
float: left;
position: relative;
}
.text-box {
background: #ffa3d0;
min-height: 300px;
float: left;
position: relative;
width: 180px;
}
.paragraph {
background: #a3cdff;
padding: 10px;
max-height: 205px;
overflow: hidden;
}
.button {
background: #c5ffa3;
margin: 5px auto;
padding: 10px;
text-align: center;
width: 50px;
}
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/