Quite simple question but tried about everything.
what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.
This is the css line i have now:
.container { width: 100%; float: left; display: inline; }
I cant get them to line up next to each other.
Here is a visual to make it more clear.
image url for bigger preview: http://www.luukratief.com/stackoverflow.png
The scrolling part is not the issue for me, just the placement of the divs.
Is this possible using percentages or is this simply not possible.
If so, please tell me how to do this with css.
Thanks in advance!
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
How does this look to you?
http://jsfiddle.net/2wrzn/19/
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => Next page</div>
<div class="container" id="p2">Page 2 => Next page</div>
<div class="container" id="p3">Page 3 => Next page</div>
<div class="container" id="p4">Page 4 => Next page</div>
<div class="container" id="p5">Page 5 => Next page</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>
Related
I'm working with divs and I managed to make the wrapper center by having this css:
.wrapper{
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:1100px;
height:100%;
}
then I have this inside that is floated left. It went inside but my problem is when it gets longer, it pass the wrapper div. The wrapper div should also adjust when the height of the div inside adjust but it's not working. When I also float the wrapper, it also adjusts but it doesn't go to the center anymore.
.inside_div{
float:left;
margin:5px;
width:400px;
height:100%;
}
What I tried to do is to float the wrapper div and use:
margin-left:200px;
to adjust it and to make it look that it's in the center. But I based it on my laptop's screen. It may not be centered on different screens with different sizes.
What I wanted to see is that the wrapper div will be centered in all screens and it will also adjust when the div inside adjusts too. I just don't know how to do it.I tried dfferent ways but still same result.
This is the html part:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="logo">
</div>
<div class="menu">
</div>
</div>
<div class="wrapper">
<div class="inside_div">
</div>
<div class="inside_div2">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
The inside_div2 is floated right.
Floated objects won't expand their parents. Your initial css height value is all that the parent container has to reference for its height. By the way, height:100% is generally not going to work for you and is rarely something you should include.
Without seeing exactly what you're trying to do, this would probably work fine. Although it depends a bit what you have inside the 'inside_div':
.wrapper {
margin: 0 auto;
width: 1100px;
text-align: left;
}
.inside_div {
display: inline-block;
margin: 5px;
width: 400px;
}
I assume you wanted it off to the left since you were floating it left. But if you just want it centered, you can either just remove your float value and use margin: 0 auto; or use the css above and change text-align to center.
EDIT: Ok, so had to recheck your stuff above. I think what you want is simply this:
.wrapper {
width: 1100px;
margin: 0 auto;
}
.inside_div {
width: 400px;
margin: 0 auto;
}
That'll center both of them, regardless of the size of the screen. You can add a height value to the inside_div if you need, but px values would be best, and if you have content in there is usually best just to let the content dictate the height without explicitly setting it.
Remove all height properties and add a "clearfix" class to your wrapper.
In your css, define ".clearfix" as :
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
That should do the trick for modern browsers. You should definitely Google "clearfix" to learn more about it.
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
I have a div container with a width 1000px, and within it three divs width 33.333333%, all float:left.
There's maybe one or two pixels' width that isn't covered by this 99.999999% where the 100%-width container div shows through (see picture- red pixels on right side).
How can I fix this, preferably without making it four divs for an even 25% each?
You Can Get an Exact and Flexible Solution
If you only float and set the width on the first two elements, and then set either overflow: hidden or overflow: auto (just not visible) on the third element, then the magic works to automatically fill the remaining space, so that there will never be a gap.
See this fiddle example, where I've overridden the values for the :last-child div to make this happen.
This works:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 1000px;
padding: 10px;
background: #5cabc1;
overflow: hidden;
}
div.box {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 33.3%;
float: left;
}
div.b1 {
background: #fca502;
}
div.b2 {
background: #ffff00;
}
div.b3 {
background: #afcfe4;
}
</style>
</head>
<body>
<div class="container">
<div class="box b1">div 1</div>
<div class="box b2">div 3</div>
<div class="box b3">div 3</div>
</div>
</body>
</html>
http://jsfiddle.net/sVu4R/5/
You need box-sizing property:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Try this:
display: inline-block;
margin: 0;
padding: 0;
Percentage widths in CSS are each calculated independently. As such, you're ending up with three 333px divs, and one pixel left over.
If the parent element has a fixed width, just set the three columns to the appropriate sizes (333px, 334px, 333px) to fill the container. No need for percentages!
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
Browser support
A Guide to Flexbox
Using CSS Flexible Boxes
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
credit
You can vertically align a div in another div. See this example on JSFiddle or consider the example below.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv's margin must be in this format: margin: auto *px;
[Where, * is your desired value.]
display: inline-flex is supported in the latest (updated/current version) browsers with HTML5 support.
It may not work in Internet Explorer :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
You use the :before css attribute to insert a div into the beginning of the parent div, give it display:inline-block and vertical-align:middle and then give those same properties to the child div. Since vertical-align is for alignment along a line, those inline divs will be considered a line.
Make the :before div height:100%, and the child div will automatically follow and align in the middle of a very tall "line."
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddle to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
If you're not fond of :before, you can always manually put in a div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:before to .parent .before
If you know the height, you can use absolute positioning with a negative margin-top like so:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
In my firefox and chrome work this:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
I found this site useful: http://www.vanseodesign.com/css/vertical-centering/
This worked for me:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
#GáborNagy's comment on another post was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Vertically aligning has always been tricky.
Here I have covered up some method of vertically aligning a div.
http://jsfiddle.net/3puHE/
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
http://jsfiddle.net/dvL512e7/
Unless the aligned div has fixed height, try using the following CSS to the aligned div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
I needed to specify min-height
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
if you are using fix height div than you can use padding-top according your design need.
or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.
simplest way to center your div element is to use this class with following properties.
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Centering the child elements in a div. It works for all screen sizes
#parent {
background-color: red;
height: 160px;
display: flex;
/*vertical-align */
align-items: center;
/*horizontal align*/
justify-content: center;
}
#child {
background-color: orange;
height: 20px;
padding: 10px;
}
<div id="parent">
<div id="child">Content here</div>
</div>
I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment.
Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
You place the script just before the content that you want to align!
In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.
I therefore used:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combine this script with
<body onResize="window.location.href = window.location.href;">
and you have a smooth vertical alignment.
Hope this works for you too!
have you try this one?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
hope this helps
divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.