I am working on a webapp and I want to put borders around floating divs which I call faux columns for lack of a better description. I know this is very very basic but for some reason - incompetence maybe - I cannot get this to work
The procedure:
I float two divs left and right. These divs are nested in another div which I want to put a border around.
The code:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>StackOvervlow</title>
<style type="text/css" media="screen">
body {
width: 900px;
}
#wrapper {
border: 2px solid gray;
}
#container {
width: 600px;
float: left;
background-color:#678;
}
#sidebar {
width: 200px;
float: right;
background-color: bisque;
}
#footer {
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="container">
<p>Placeholder Text.</p>
<p>Placeholder Text.</p>
</div>
<div id="sidebar">
<p>Placeholder Text.</p>
</div>
</div>
<div id="footer">
<p>Some footer stuffs</p>
</div>
</body>
</html>
The outcome...
Please explain why the border shows up as a line and does not go around the two enclosed divs as expected. If you could suggest ways to fix this, I'll appreciate that.
Thank you.
Simply add:
overflow: hidden;
to the CSS for #wrapper, demo at: JS Fiddle.
The reason the border collapses to a line is because the floated elements are removed from the document's flow, which means that they essentially occupy no space within their parent element, which, with no contents, collapses. The overflow: hidden; causes the parent element to wrap around its children. Though, to be honest, I don't particularly understand why that happens.
It's worth having a read of CSS Floats 101, at A List Apart for a refresher/primer on CSS floats, though, for pointers on their behaviour.
When you float the element, it does not take up space the same way as it does when it is inline.
The solution is to put a block level element that has clear both attribute at the bottom:
<div style='clear:both;'></div>
See detail here: http://jsfiddle.net/billymoon/eDqg5/
Related
I want to position a paragraph to the right of an <iframe> of a Google map.
I do not know how to show my code, so here is a screenshot of what I want:
Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):
css
.google_map{
width:55%;
margin-right:2%;
float: left;
}
.google_map iframe{
width:100%;
}
.paragraph {
width:42%;
float: left;
}
.clearfix{
clear:both
}
html
<div class="google_map">
<iframe></iframe>
</div>
<div class="paragraph">
<p></p>
</div>
<div class="clearfix"></div>
You have two options, either float:left or display:inline-block.
Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.
Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.
You can simply use a div to make a container and display: flex; to make the content appear side-by-side like this:
.splitscreen {
display: flex;
}
.splitscreen .left,
.splitscreen .right {
flex: 1;
}
<div class="splitscreen">
<div class="left">
Content
</div>
<div class="right">
Content
</div>
</div>
None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:
position: absolute;
width: 50px;
And apply this style to the right element:
margin-left: 50px;
Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:
display: inline-block;
Applying this style may not be necessary depending on surrounding elements
Fiddle:
http://jsfiddle.net/2b0bqqse/
You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left
Fiddle:
http://jsfiddle.net/qrx78u20/
For your iframe give an outer div with style display:inline-block, And for your paragraph div also give display:inline-block
HTML
<div class="side">
<iframe></iframe>
</div>
<div class="side">
<p></p>
</div>
CSS
.side {
display:inline-block;
}
Use either float or inline elements:
Example JSBIN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>float example</div>
<div><div style="float:left">Floating left content</div><div>Some content</div></div>
<div>inline block example</div>
<div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
Like this
.block {
display: inline-block;
vertical-align:top;
}
JSFiddle Demo
You can use float:left to align div in one line.
Fiddle
You can float the elements (the map wrapper, and the paragraph),
or use inline-block on both of them.
Wrap the iframe in a class, float that left.
The paragraph with then be forced up and to the right as long as there is room for it.
Then set your paragraph to display:inline-block, and add some left margin to tidy it up.
<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>
.left { float: left; }
p { display: inline-block; margin-left: 30px; }
Here's a fiddle: http://jsfiddle.net/4DACH/
Put the iframe inside the <p> and make the iframe CSS
float:left;
display:inline-block;
give your boxes the class foo (or whatever) and add the css
.foo{
float: left;
}
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/
The following table element in the "center" div causes the contents in the "left" divs to be offset by several pixels from the top (8 in my browser). Adding some text prior to the table removes this offset.
Why? How do I stop this from happening without requiring a "dummy" line of text before my table?
<html>
<head>
<style type="text/css">
#left {
display: table-cell;
background-color: blue;
}
#menu {
background-color: green;
}
#center {
background-color: red;
display: table-cell;
}
</style>
<body>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
<div id="center">
<table><tr><td>This is the main contents.</tr></td></table>
</div>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
</body>
</html>
Update0
Note that with floats, I am unable to get a centered column expanding to its content. The source from which I extracted this example uses display: table; margin-left: auto; margin-right: auto; to center everything in the body.
I was able to fix it by adding vertical-align:top; to the '#left' style.
You should wrap the display: table-cell divs in another div with display:table-row
At a guess, I'd say you have a margin-top set on your <table>. Have a look in Firebug.
table {
margin-top: 0;
}
Any particular reason you're laying out like this? You can float divs and do advanced layouts without setting display: table-cell. Besides, tables should only be used for tabular data.
I can float an image on the left and have the text wrap around it no problem just by specifying float: left on the image. Like this:
<div id='foo'>
<img src='bar' alt='baz' style='float: left;' />
Lorem ipsum...
</div>
However if the image is wrapped in a div like the following i cannot achieve the same effect without declaring a fixed width on both the div#image_container and the div#text_container
<div id='image_container'>
<img src='blah' alt='blah' />
</div>
<div id='text_container'>
Lorem ipsum... long text
</div>
Is there a way to keep the flexibility of the first solution and avoid declaring a width and have the div#image_container float next to the div#text_container?
Try setting overflow: hidden on the wrapper div, that should automatically set the div to the width of the image.
OK maybe I misunderstood your question. Do you just want the text to flow around the image? If so, all you should need is this CSS:
#text_container { display: inline; }
#text_container,
#image_container {
display: inline;
}
should do it. Try this:
<html>
<head>
<style>
#top {
float: left;
display: inline;
border: 1px solid green;
}
#bottom {
float: right;
display: inline;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="top">
I'm the top div
</div>
<div id="bottom">
I'm the bottom div
</div>
</html>
But if the content of your div's is bigger than the width you've left for them (which it probably is) then you will struggle. You should really give it a width but the above might work for you depending on how you want to use it.
Instead of the text container use a paragraph tag (<p></p>). It will wrap around the content plus it is more accessible and semantic.
How to size a div's height to its container height, using CSS ?
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
You can either:
use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers
or
write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere
Your pick :)
There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.
$(divToResize).css('height',$(container).innerHeight());
$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.
This will work regardless of if the container's height is specified in CSS or not.
I know this was answered forever ago, but when I run into this issue nowadays, I use Flex Box. It's awesome. See A Complete Guide to Flexbox by Chris Coyier
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}
<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.
It seems like you are trying to get equal height columns. You could use the fauxcolumns method where a background image is used to fake the equal height. There are other methods out there.
You can tell the container div to display as table and have the inner div to display as a table cell.
The HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
The CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Fixes for IE
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
It's a tricky thing to do--there's no clear-cut best approach, but there are a few common ones.
If we assume that what you REALLY need is for the height of the right column to be (or appear to be) equivalent to the height of the left column, you can use any of the techniques frequently used to get equal height columns. This piece contains a few tricks to get the right look and behavior. I recommend reading it to see if it solves your problem.
The other approach uses Javascript to determine the height of the container, and setting your right-hand column to that. That technique has been discussed on SO here. As long as your container's size is not the only thing determining the size of your outer container, that should be a valid approach (if that's not the case, you'll have a chicken-egg problem that could cause weird behavior).
Sample code, you need to start from the html element so you can make use of the flexible height in the containers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
CSS files use the 'padding' function to determine the height and depth of containers. To change the height of the container field simple insert of adjust the padding fields for the specified containers.
The code excerpt below is an example of the CSS used for a container class (you'd find this as in the html file.
.container{padding-top:100px;padding-bottom:50px}header
i use the overflow:hidden it work properly.
.bu {
overflow: hidden;
background-color:blue;
}
<div class="bu">
<button>english</button>
</div>
try adding this to the div to be resized
.layout-fill {
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
}
I did something similar to KyokoHunter:
$('div.row').each(function(){
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
});
This goes through every row in a div "table" and makes the heights all match, as long as the divs are classed accordingly.