I am trying to make vertical-aligned div in relation to auto height div.
It is a little bit hard to explain so I have screenshot that will explain everything:
The orange div is the container.
The blue div is 2nd container inside the main container.
The green div is the vertical-aligned div which should be aligned in relation to the blue one.
I have no idea how to make this work. I want it to be cross browser (ie6+, ff & chrome).
Thank you very much!
For this answer I have assumed that both the blue as the green divs have a dynamic height.
In order to calculate the correct offset of the green div we can not use CSS. CSS doesn't allow us to position an element using the data of another element.
Instead, we need to calculate the offset ourselves which requires a client-side language. Time to embrace Javascript. To make it easier for us, I'll use jQuery because it does a lot of work for you using real sweet syntax.
So, we need to find out how to calculate the offset. First we need to know the center of the blue element. Easy enough: blue.height / 2. Next, we need to calculate how much the green div should go up when the top of the green div is aligned the actual center of the blue div. That's basically the half of the height of the green div, right? That gives us the next formula: (blue.height / 2) - (green.height / 2).
Alright, let's put that in javascript!
var center = $('div.blue').outerHeight(true) / 2; // this is the blue div
var offset = center - $('div.green').height() / 2;
And finally, setting the offset:
$('div.green').css({
'margin-top': margin
});
Cool theory, but I'm sure you want to see it in action. You can see the demo here.
Edit:
Oh yeah, I forgot to mention that jQuery is a cross-browser framework and supports very, very old browsers.. Read all about it here!
See: http://jsfiddle.net/thirtydot/aeFrH/
CSS:
#container {
width: 748px;
background: orange;
}
#container-inside {
width: 500px;
background: cyan;
}
#aligned {
width: 248px;
background: green;
}
#container-inside, #aligned {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
HTML:
<div id="container">
<div id="container-inside">
Some<br />
content<br />
is<br />
in<br />
here.<br />
</div><div id="aligned">
Aligned.
</div>
</div>
Related
I came across this really interesting thing. Was messing around with floats and clearfix. I have a section (container) which contains 3 left floated div boxes and to avoid container collapsing, I use clearfix method on it. Like that one before and after, empty content, display block and clear both. Nothing special. Now, to see how this clearfix behaves with margin on top and bottom, I created a div box on top, outside container. Container has both margin top and bottom of 50px, so it was working great. But oddly, when I tried to float an orange box outside the container, the box became contained inside container respectfully to childs of the container. I find this weird, coz that box wasn't inside container's tag, it was outside. I understand that floated elements are removed from normal document flow, so container's margin-top couldn't relay on div box any longer since it's been removed from document flow and the only element to rely on was body left. But my question is: Why did orange box became contained inside brown container if orange box is not its child?
Before:
After float: right; was applied to orange box:
I mean orange box could have been moved to any other place oddly, but not contained so nicely inside container when it's not even a child of container,
they are siblings. What's really happening here?
Code is basic:
<body>
<div id="box1"></div>
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
<div id="box"></div>
</body>
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}
#box {
width: 300px;
height: 100px;
background: blue;
}
#box1 {
width: 300px;
height: 50px;
background: orange;
float: right;
}
As you mentioned that you are using float:right on orange box and its going inside other div then yes you have not used clear:both after using float. Point to remember that if you are using clearfix before and after on section won't work. You have to use clear:fix just after floated div or else it will break the flow and will cause issue like you are seeing.
See in demo. I simply use clear:both after floated right div and everything seems fine. To make it more simple, try to clear whenever you use float:right or left and you will not get any problem. If you are getting this with ul li tag still after last li use clear div and you are done. Hope this will help you.
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
Hopefully the good people at Stackoverflow can help me today - I basically drank far too much beer last night watching the football and my brain has stopped working.
I'm doing a responsive theme, 3 column layout with H2 tags at the top of each. I need to have a background image filling up the remaining space within the column. I've mocked up an image below to demonstrate what I'm on about;
If the background was a block colour I'd probably display the H2 inline and apply the background-colour to that as well, blocking out the image behind it on the containing div.
As you can see though, the mottled background means that technique doesn't work very well, notice the obvious line above the text;
I've been trying all sorts - there must be some clever way of doing this and I hope you can help me!
Thanks for reading!
Robbie.
EDIT Ok, in the end I used a combination of the two answers below, but accepted the answer splitting the header tag into two divs and floating the first left (as I wouldn't have thought of that). It didn't work on it's own, but by giving the left floated div a background the same height as the double lines and tiling it on the x-axis (rather than giving the whole element the background), I was able to cover up the lines under the text without it jarring with the background.
Image:
HTML:
<h2>
<div class="h2-text">Aha!!</div>
<div class="h2-lines"> </div>
</h2>
And CSS;
.h2-text {
padding-right: 5px;
background: url(../images/footer-lines-overlay.png) repeat-x 0 20px;
float: left;
}
.h2-lines{
background: url(../images/footer-h2-lines.png) repeat-x 0 20px;
}
Thanks very much!!
Overshot the Ballmer Peak, I see.
Anyway, one possible solution is to use floating elements:
<h2>
<div style="float: left;">My Header Tag</div>
<div style="background: whatever;"> </div>
</h2>
A simple solution would be done using the following structure:
<h1><div><span>The text</span></div></h1>
Add this style
h1 {
background: url('the-noise-background');
}
h1 div {
background-image: url('the-double-lined-background');
}
h1 div span {
padding-right: 20px;
display: inline-block;
background: url('the-noise-background') -20px -10px /* Fine tune those pixels so it matches the original position */;
/* use required line-height and other stuff to full cover the lines */
}
I'm creating a full screen (html, body {height: 100%}) web application and have a screen which has a form in the top (approximately) half, and some other information with two buttons in the bottom (approximately) half.
What I'm wanting to do (being a touch screen in an industrial environment) is to make these buttons as big as possible. So they have height: 50% inside the bottom container.
The question is: how do I get the top half to take the height it requires, and the bottom to take the rest? i.e. is it possible with CSS (2.1 preferably, but 3 is good too)?
There's no way to make an element in CSS 2.1 to take up the rest of the space vertically. Block elements, like Div tags, will automatically stretch out to fill a space horizontally, but won't do it height-wise. This means that you can't get something, like a content page or your buttons, to stretch out to fill rest of the empty space.
The best way to achieve something like this is with tricks, or knowing exactly how high each element will be. For instance, if you know the exact percentage that the other elements will be, you can hard-code a percentage into your stylesheet as described, here. Another trick would be by making the bottom element fill the entire window, and hiding the top half with the form.
Tables, however, are the only elements which will stretch to fill a vertical space. That might be the only solution available to you. An example of this is shown below:
<form ...>
<table id="container">
<tr><td id="top">Form elements go here</td></tr>
<tr><td>Buttons go here</td></tr>
</table>
</form>
And the CSS:
#container {
height: 100%;
width: 100%;
}
#top {
height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}
.buttons {
height: 100%; /* Used to stretch the buttons to fill the element. */
}
the HTML:
<div id="c">
<div id="topHalf"></div>
<div id="bottomHalf"></div>
</div>
the CSS:
#c {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#topHalf, #bottomHalf {
height: 50%;
width: 100%;
background: #00f;
}
#bottomHalf {
background: #f00;
}
You can place your buttons inside the bottom half.
try something like this :-
<html style="height: 100%">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
<div id="top" style="background-color: #cccccc; height: 50%">form here</div>
<div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>
essentially height:100% just tells the div to be as big as its parent, and this carries on up the chain of parent objects. you'll notice that if you remove the height:100% on the html tag that all the inner children will just collapse up.
hth
EDIT: I just realised this is appropriate if using tables. If using a div then it's a little harder... a JavaScript function to manipulate the height of the bottom element using the style property in the element. Have a look at this previous question that may help with the JavaScript
ORIGINAL ANSWER
Try putting in the CSS for the bottom half of the application
min-height:50%;
Then specify no height in the top half section.
This will mean the bottom half with the buttons will be at least 50% of the screen area being able to become bigger as required and the bottom half will take the remaining section.
Personally I make this a little smaller than what I expect to use, e.g. instead of 50% I may use 30%, this means I'm getting the most out of my screen real estate but it may not be appropriate in your app.
I hope this helps ;-)
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)