I am trying to vertically align the text in a floated div to the bottom but it doesn't seem to work. Here is what I currently have:
<div class="header_left">TEXT</div>
CSS:
.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
}
I need the div to be floated as I want to place 2 divs side by side but I cannot seem to make the text go to the bottom of the div.
Working DEMO
You need to have 2 divs to achieve this with relative and absolute position.
<div id="container">
<div id="content">Bottom Content</div>
</div>
#container
{
position: relative;
height: 200px;
background-color: #eee;
}
#content
{
position: absolute;
bottom: 0;
}
http://jsfiddle.net/2Z6tA/1/
<div class="header_left">
<span id="bottom">Text at bottom</span>
</div>
CSS:-
.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
height:100px;
position: relative;
}
span#bottom{
position: absolute;
bottom: 0;
}
Another thing to try if you dont want a div container, set a margin top & bottom. For example:
.header_left {
margin-top:50%
margin-bottom:50%
}
You'll have to tinker with the measurements, 50% isn't always the amount to use. I used 9% to vertically align a floating :before image on a button on a mobile site I was working on.
Related
I have a in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.
The JsFiddle
Here's my HTML:
<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>
and CSS:
.header {
position: relative;
top: 0%;
height: 20%;
}
/*Header CSS*/
img#ttl {
position: relative;
top:50%;
height: 50%;
left: 0px;
}
img#se {
position: relative;
top:60%;
height:30%;
vertical-align:right;
margin-right: 2%;
}
PS: I tried float:right;. Its works in in Chrome and FF but not in IE.
And ofcourse this div has a parent div. But I don't think that will be a problem.
You can wrap the images inside a position relative container and use position: absolute; to position them to bottom left and bottom right
Demo
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
Note: Am using nth-of-type to select images so that I don't have to
declare classes for each image, if you want to support older browsers,
you need to add class for each image and replace :nth-of-type with
those classes
try this
<div class="header">
<div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div>
<div class="right"><img id ="se" src="Home_files/images/se.png"><div>
</div>
CSS
.left{
float:left;
}
.right{
float:right;
}
Demo
I used a table in a basic HTML header div for an email. It worked fine. In tr, had one image on left as td and another on right with float: right in another td.
I have two divs, both are floating left. "Left" div would be left column of the page. "Right" div would be the main content.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
</div>
<div id="docked_div">
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 250px;
background: red;
}
#right {
float: left;
background: blue;
}
This works fine. Now I have the third div named docked_div. This div should be outside the wrapper and on the right side of right div (about 20px from top of right div).
So, the black div now is on the left side, but it should be on the right side and outside the wrapper.
I have tried to set position to relative or absolute in different ways, but I cannot get
the result I want. I do not have much CSS knowledge on creating layout, so, I would appreciate any suggestions and guidance.
Here is the full example:
http://jsfiddle.net/TA7Rh/
I think this will work
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
position: relative;
}
#docked_div {
/*background: url(../images/mazais_fons.png);*/
background-size: 100%;
width: 53px;
height: 212px;
position: absolute;
right:-60px;
}
jsFiddle Link
change the right position as per your requirement.
Try this.
#docked_div {
background-size: 100% auto;
height: 212px;
position: absolute;
right: 0;
width: 53px;
}
This will take the div to be on the right of the main div. Hope this helps.
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...
Here is an example of the problem:
http://jsfiddle.net/ryfvn/
In IE7 the container becomes full-width and loses his shrink-wrap. This does not happen if both the children are floated left, or if both of them are floated right.
Had same problem and couldn't find an answer using float right, but I was able to get the same effect using absolute positioning.
http://jsfiddle.net/johntrepreneur/QSr6K/2/
<div class="container">
<div class="left">content</div>
<div class="right">content</div>
</div>
<style type="text/css">
.container {
float: left;
padding: 10px 50px 10px 10px;
background-color: green;
position:relative;
}
.left {
float: left;
background-color: red;
}
.right {
background-color: blue;
position: absolute;
right: 10px;
top: 10px;
}
</style>
Add a width to your .container element.
Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/
What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be done without specifying width of .m
No JavaScript Only CSS Solution
You can add a a wrapper div, after .m and before .block and set his width:
<div class="m">
<div class="wrapper">
<div class="block">
(...)
</div>
</div>
</div>
Style:
.wrapper{
width:100px;
}
Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.
as i understand your question that you want floated div's work like block div's
your
CSS:
.
block{
border: 1px solid white;
float: left;
display: inline-block;
clear:left;
}
check this http://jsfiddle.net/sandeep/Qu63T/6/
Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:
.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;
height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}
http://jsfiddle.net/Qu63T/7/