I need to create a <div> of height 200px that has some text at the very top and the very bottom. This needs to work in all major browsers. I've tried various combinations of alignment/vertical-alignment with no luck.
Use two spans (or whatever) inside the div:
<div>
<span id="top">Text at top</span>
<span id="bottom">Text at bottom</span>
</div>
Then give the div position: relative; and position the spans absolutely:
div {
position: relative;
height: 200px;
}
span {
position: absolute;
}
span#top {
top: 0;
}
span#bottom {
bottom: 0;
}
Live example:
http://jsbin.com/ucowi3
You can't do this with one single block of text, as you're talking about two separate bits of styling (ie one bit to the top and one bit to the bottom), so you'll need to put the two bits of text into their own separate elements within the main <div>. eg
<div class='maindiv'>
<div class='topofmaindiv'>This goes at the top</div>
<div class='bottomofmaindiv'>This goes at the bottom</div>
</div>
Then you can style them using CSS to position the two inner divs at the top and bottom of the main div:
.maindiv {
height:200px;
}
.topofmaindiv {
position: relative;
top:0px;
}
.bottomofmaindiv {
position: relative;
bottom:0px;
}
Obviously you will probably need to add other styles to that to suit your layout, but that should get you started.
Related
The only way I know to get a layer on top is to use position: absolute.
(top good, bottom bad)
Once you do that you pretty much lose the option to scale dynamically with the rest of the page.
Sure you can do some width: calc(62% - 60px); hacking and get it almost there, or you can write a script that calculates the size etc..
But is there really no way to have a layer on top and still have it scaling with the page?
Its possible with position:relative; Relatively positioned elements takes the width of parent & can be bring on top by using z-index. z-index is applicable only on positioned elements.
Sample Code:
.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}
<div style="width:120px;" class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
<div class="menu">
<div>AirBnb</div>
<div>Booking.com</div>
<div>Expedia
<div>Agents</div>
</div>ThaiHome</div>
</div>
<div> Other div below the menu list width bigger width</div>
parent{
position: relative;
}
child {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
I want to use a text as the background for another text. Basically, this is quite easy by using two div elements with appropriate position and z-index settings, as described in Is there a way to use use text as the background with CSS?.
My problem is that I want to align both texts, although they are different in size. The background text is bigger, and the foreground text shall be aligned vertically with the background one, so that both texts' vertical center is at the same position.
I can achieve this by manually adjusting the position in pixels, but I have to do this for every font-size I want to use individually. Moreover, I can never be sure that this works in every browser in the same way.
Is there a better alternative to do this?
I got it by using:
<div style="position: relative; font-size: 100pt; height: 100px;">
<div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
B
</div>
Sample text
</div>
Using left and line-height properties I am able to align both texts, and when I increase the font-size of the container, their relative alignment stays the same.
Vertical align can be done like this:
.parent {
position:relative;
zoom:1;/*has layout for ie*/
}
.verticalcentered1, .verticalcentered2 {
position:absolute;
top:50%;
height:20px;
margin-top:-10px;/*half the height*/
}
.verticalcentered1 {z-index:1;}
.verticalcentered2 {z-index:2;}
If the verticalcentered elements are youre texts they will be vertically centered in the parent and be on top of each other, if thats what youre looking for.
i think you are looking like this :- DEMO
HTML
<div id="container">
<div id="background">Sample Some Text </div>
B
</div>
CSS
#container {
position: relative;
font-size:70px;
color:#00c7ff;
z-index:-1;
}
#background {
left: 20px;
position: absolute;
right: 0;
top: 25%;
z-index: 10;
color:black;
font-size:20px;
}
Yeah ofcourse you can user alternative way - Placeholder text
Text will be automatically removed when you type the new text then default text will be remove
//textbox
<input type="text" defaultvalue="Name" value="Name" name="add_name" id="add_name">
//Javasript Code
//For the placeholder
$('#add-category input[type=text]').focus(function() {
if ($(this).val() == $(this).attr('defaultValue')) {
$(this).val('');
}
});
$('#add-category input[type=text]').blur(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('defaultValue'));
}
});
Try the above option.
Boxes are some objects(button, label, textarea). Green's size is dynamic. Especially I have a problem with the blue box stick to bottom.
Place a holder around it and it will take the height from the 'green' one, and give them only absolute and bottom 0, it won't matter what width you give your elements.
Edit: hopefully this works for you, with floating the elements, the green one to the right, and the rest left.
<div id="divHolder">
<label id="red">Label</label>
<button id="blue">Button</button>
<div id="green">
a
</div>
<br class="clearFloat" />
</div>
#divHolder {
width:300px;
position:relative;
}
#green {
height:300px;
background-color: green;
float:right;
}
#red {
background-color:red;
float:left;
position:absolute;
}
#blue {
background-color: blue;
bottom: 0;
position:absolute;
}
.clearFloat {
clear:both;
}
check it out here:
http://jsfiddle.net/YA9yD/32/
Here's my solution →
The main problem here is that the left-hand column doesn't know how tall the right-hand column is.
You can put them in a parent together (which will wrap both columns), but the left-hand column will not know the height of the parent because a child element can only expand to the height of a parent element if the parent element's height is explicitly set.
Also, there are two distinct columns here, so I wanted to try and group them as close to the way they appear as possible. Putting the left column inside the right column (the green box) doesn't accurately represent how this is structured.
HTML:
<div id="container">
<div id="labelDiv">
<label>I'm a label.</label>
<p>Text area, whatevs.</p>
</div>
<button>Hello</button>
<div id="greenBox">
<p>Green box text.</p>
</div>
</div>
CSS:
#container {
width: 610px;
overflow: hidden;
position: relative;
}
#labelDiv {
width: 300px;
float: left;
}
button {
position: absolute;
bottom: 0;
left: 0;
}
#greenBox {
width: 310px;
float: left;
}
So everything on the left (other than the button) is floated left, and the green box is also floated left. Great so far, but the the button needs to know how tall the entire box is so that it can attach itself to the bottom. So, we set overflow to hidden on the outer container so that it wraps around the floated elements, and absolutely positioning the button to the bottom of this aligns it exactly with the bottom of the tallest inner element (the green box).
I'd also recommend setting some margin-bottom on #labelDiv so that it doesn't cover up the button.
See example of the following →
As long as the blue and red widths are specified, you could use relative and absolute position as follows:
<div id="green">
<label id="red">Label</label>
<button id="blue">Button</button>
</div>
#green {
position:relative;
}
#red {
width:100px;
position:absolute; left:-110px; top:0px;
}
#blue {
width:100px;
position:absolute; left:-110px; bottom:0px;
}
I have been trying to get this right for days but I just can't.
My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).
Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png
I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).
I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.
So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?
Use A List Apart's Holy Grail and position the buttons absolutely.
Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.
[removed code --- not 100% sure about your exact requirements]
You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { height: 100%; margin: 0; }
.col {
width: 33%;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid #000;
background: blue;
position: absolute;
}
.left { left: 0; }
.mid { left: 33.33%; }
.right { left: 66.66%; }
.button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
</div>
<div class="col mid">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
<div class="col right">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
</body>
</html>
<div style='height:200px;'>
SOME TEXT
</div>
how do i align "SOME TEXT" at the bottom of the div using CSS without padding?
The absolute easiest way, though not-exactly using your code example, would be:
div {height: 400px;
width: 50%;
margin: 0 auto;
background-color: #ffa;
position: relative;
}
div p {position: absolute;
bottom: 0;
left: 0;
right: 0;
}
html
<div id="container">
<p>SOME TEXT</p>
</div>
Wrap your text in an element, anything from <p>, <span>, <div>...whatever, and position that element at the bottom of its container.
You can't do it in a simple way, at least not cross browser.
You can use the display: table; vertical-align: center;
You can use JS/ CSS expressions.
You can have another element inside the div, and position it absolute in relation to the div:
<div style='position:relative;'>
<div style='position: absolute; bottom:0;>
My Text
</div>
</div>
But really, as much as I hate to say, Tables is the KISS here (if you need to veritcaly center it).
TDs can vertically align text with vertical-align, but this does not work on DIVs. It is not considered good style to use tables to vertically align elements.
You cannot vertical-align text within DIVs with CSS. You can only use padding, margin, or absolute and fixed positioning to align an text vertically.
If you use absolute positioning well, you can vertically align the text by vertically aligning a container that the text is in. However, absolutely positioned elements do not take up "space" within their container, which means you have to set a margin or padding to offset that space in the container.
Eg:
HTML:
<div id="container">
<span id="text">Some text, Some text, Some text, </span>
</div>
CSS:
#id {
position:relative;
margin-bottom: 100px;
}
#text {
position:absolute;
bottom:0;
height: 100px;
overflow:hidden;
}
# id{
display:table-cell;
vertical-align:bottom;
}
Using flex, supported in most recent browsers
div {
align-items: center;
background: red;
display: flex;
/* Uncomment to align it horizontally */
/* justify-content: center; */
}
<div style='height:200px;'>
SOME TEXT
</div>