for some reason
the width of the div is 100% and if i set it to auto, nothing changes. tried display: block; and still nothing.
what I have in
index.html
.box {
border: 1px solid #555;
display: block;
width: auto;
}
<head>
<title>project x</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='box'>This is a box</div>
<div class='box'>This is another box</div>
</body>
I enjoy cracking problems but this one crack me.
Edit
I want the div to take the width of the words. I don't want it to be 100%.
adding to Explosion Pills answer now that its clear what you want, this css should work.
.box {
border: 1px solid #555;
display: inline-block;
float:left;
clear:both;
}
Alternatively, you could place some <br> tags after each <div> block
Width display: block, the elements will always use as much width as is available. It seems like you want to use display: inline-block
http://jsfiddle.net/HpMSU/
width:auto on a DIV expands it to fill it's parent, not to be sized by it's children.
ex: http://jsfiddle.net/nTWvr/
To size a DIV by it's content, there are a few methods: How to make div not larger than its contents?
The following options can change the behavior of width: auto from using the available container width to so called shrink-to-fit algorithm:
Float:left/right
Position: absolute
Display: inline-block
Display: inline-table
Display: table
Display: table-cell
Assuming you need that the blocks to stay in the block formatting context of the normal flow (i.e. to go one after another vertically as usually, just have the width of their content), I suppose that in this case display: table will be the best solution.
use display: inline-block
and add a class
.clear { clear:both;}
place it in between the boxes
so
http://jsfiddle.net/HpMSU/1/
Setting width:auto; is close to the same as setting width:100%; (the only real difference is that they handle margin and padding differently).
Also, div objects are by default block elements, so setting display:block; won't change their behavior.
You said you want the div to take up the width of the words. To do that you can either set display:table-cell (which is not very IE friendly) or you can float the div and it will snap to fit the contents inside.
.box { float:left; }
Make sure to properly clear your float after the div to avoid breaking the layout of contents below it.
.clear { clear:both; height:0px; }
<div class="clear"></div>
I know this question doesn't mention centering the element, but that's what I was looking for when I was directed here.
display: inline-block does its job in terms of width, but doesn't work if you also want to center the block. You can add text-align: center to the parent, but then you would have to override this property for all other elements inside you don't want centered.
div {
border: 1px solid #aaa;
padding: 1rem;
display: inline-block;
margin: 0 auto; // doesn't work with inline-block
}
<div>Content</div>
To handle it properly just for this element you need display: table:
div {
border: 1px solid #aaa;
padding: 1rem;
display: table;
margin: 0 auto;
}
<div>Content</div>
I think you want this result:
<head>
<title>project x</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span class='box'>This is a box</span>
<span class='box'>This is another box</span>
</body>
.box {
border: 1px solid #555;
}
I just changed div to span! try to use proper HTML tags!
Related
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
When setting the background color of a <H1> tag(or any <H*> tag) the element spans the length of the body element of the HTML page.
<H1>A</H1>
H1
{
background: #ddd;
}
The following image shows the problem and ideal result
I can get the desired effect by statically setting the width of the <H1> tag in the css like
H1
{
background: #ddd;
width: 10px;
}
The problem with this is that if I have text inside the <H1> tag that is bigger than 10px it will overflow the background.
h1 elements use display: block, which is the correct default behavior. It prevents subsequent content from appearing on the same line, and allows borders and backgrounds to be the (appropriate) full width of the content region.
If you need the element to only take the width of the text, use one of the following methods:
an inner element such as <h1><span>h1</span></h1> so that you can select the inner element to provide the background.
span {
background-color: #CCC;
}
<h1><span>h1</span></h1>
display: inline if you want the heading to be treated as inline text and flow appropriately.
h1 {
background-color: #CCC;
display: inline;
}
<h1>h1</h1>
<!-- here's where this fails -->
<h1>h1 again</h1>
display: inline-block if you want the heading to have the features of a block element (such as being able to set padding, height, and width)
h1 {
background-color: #CCC;
border: 1px solid #000;
display: inline-block;
padding: 2px 3px;
}
<h1>h1</h1>
<!-- here's where this fails -->
<h1>h1 again</h1>
float: left; clear: both; if you want the heading to align to the left, but ignore other floated elements. The issue with this one is that it will no longer collapse margins.
h1 {
background-color: #CCC;
clear: both;
float: left;
}
<h1>h1</h1>
<h1>h1 again</h1>
No need to set the width. Just update the display type from block to inline or inline-block, if needed.
Something like this:
h1.ib {
display: inline-block;
}
Fiddle: http://jsfiddle.net/v3f2obr1/
You can control the layout mode of the elements with the display property.
However, there is a problem: most values that make the box shrink to its content instead of growing to cover the container block are inline-level, e.g. inline-block, inline-table, inline-flex. That means that, if there is other inline content around your headers, they will be displayed in the same line (if they fit).
Probably, you don't want that. Then, you can use display: table:
h1 {
display: table;
background-color: #CCC;
}
Before
<h1>h1</h1>
Middle
<h1>h1 again</h1>
After
The table display is block-level, so the header will be in a different line than surrounding inline content. But unlike block, the contents are layed out using the table layout, so the header will shrink to its content.
Edit: Jack Pattishall and zzzzBov beat me to it.
You don't actually have to set the width. There's a CSS property available for solving your problem. display:inline
An inline element only takes up as much width as necessary.
Just set your heading to this.
h1 {
display: inline;
}
Here's a byte-saving way to do it:
H1 {
display: inline;
background-color: #CCCCCC;
}
<h1>Your Text Here</h1><br>
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
I have the following simple layout:
div.main
{
width: 300px;
border: 2px solid #98999E;
overflow: auto;
}
div.main > div
{
float: right;
border: 2px solid #FF3700;
margin: 2px;
}
div.inner > div
{
float: right;
}
<div class="main">
<div class="inner">
<div>123</div>
<div>456</div>
</div>
<div>999</div>
</div>
In Chrome and Firefox, this is rendered as expected - all the content is within the same line:
However, when testing this in IE7 (or actually IE8 in compatibility mode, to be exact), the first div under the main one takes a width of 100%, and therefore the second is pushed beneath it:
An example can be found here.
How can that be fixed?
(Edit:
It turns out that this is happening in IE9 in compatibility mode as well)
(Edit 2: It seems that this is happening with float:right only, and doesn't with float:left)
Apply display: inline; or display: inline-block; to the inner div.
w3.org - 9.2.2 Inline-level elements and inline boxes
IE might need a width...technically you're supposed to have a width assigned when you are floating an element.
Try adding a div with a style of clear:
div.main{
width: 300px;
border: 2px solid #98999E;
overflow: auto;
}
div.main > div {
float: right;
border: 2px solid #FF3700;
margin: 2px;
}
div.inner > div {
float: right;
}
div.clear{
clear:both;
}
<div class="main">
<div class="inner">
<div>123</div>
<div>456</div>
</div>
<div>999</div>
<div class='clear'>
</div>
This MUST be done with a div (or some other block level element). It's always good CSS form to clear your floats at the same level at the same level as you create them, after all the floated elements. Let me know if it works for you. Cheers.
I'd suggest that you specify width for floated <div>. That way, you will be more sure about the layout; rather than relying the rendering completely on the browser. Also, it'd hopefully help you visualize what layout you're trying to get at.
Just from the example above, maybe using floating <span> inside a <p> will accomplish what you need? Or, just right-align a paragraph.
I have the page structure as:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
Now, the child-left DIV will have more content, so the parent DIV's height increases as per the child DIV.
But the problem is child-right height is not increasing. How can I make its height as equal to it's parent?
For the parent element, add the following properties:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
then for .child-right these:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Find more detailed results with CSS examples here and more information about equal height columns here.
A common solution to this problem uses absolute positioning or cropped floats, but these are tricky in that they require extensive tuning if your columns change in number+size, and that you need to make sure your "main" column is always the longest. Instead, I'd suggest you use one of three more robust solutions:
display: flex: by far the simplest & best solution and very flexible - but unsupported by IE9 and older.
table or display: table: very simple, very compatible (pretty much every browser ever), quite flexible.
display: inline-block; width:50% with a negative margin hack: quite simple, but column-bottom borders are a little tricky.
1. display:flex
This is really simple, and it's easy to adapt to more complex or more detailed layouts - but flexbox is only supported by IE10 or later (in addition to other modern browsers).
Example: http://output.jsbin.com/hetunujuma/1
Relevant html:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Relevant css:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox has support for a lot more options, but to simply have any number of columns the above suffices!
2.<table> or display: table
A simple & extremely compatible way to do this is to use a table - I'd recommend you try that first if you need old-IE support. You're dealing with columns; divs + floats simply aren't the best way to do that (not to mention the fact that multiple levels of nested divs just to hack around css limitations is hardly more "semantic" than just using a simple table). If you do not wish to use the table element, consider css display: table (unsupported by IE7 and older).
Example: http://jsfiddle.net/emn13/7FFp3/
Relevant html: (but consider using a plain <table> instead)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Relevant css:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
This approach is far more robust than using overflow:hidden with floats. You can add pretty much any number of columns; you can have them auto-scale if you want; and you retain compatibility with ancient browsers. Unlike the float solution requires, you also don't need to know beforehand which column is longest; the height scales just fine.
KISS: don't use float hacks unless you specifically need to. If IE7 is an issue, I'd still pick a plain table with semantic columns over a hard-to-maintain, less flexible trick-CSS solution any day.
By the way, if you need your layout to be responsive (e.g. no columns on small mobile phones) you can use a #media query to fall back to plain block layout for small screen widths - this works whether you use <table> or any other display: table element.
3. display:inline block with a negative margin hack.
Another alternative is to use display:inline block.
Example: http://jsbin.com/ovuqes/2/edit
Relevant html: (the absence of spaces between the div tags is significant!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Relevant css:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
This is slightly tricky, and the negative margin means that the "true" bottom of the columns is obscured. This in turn means you can't position anything relative to the bottom of those columns because that's cut off by overflow: hidden. Note that in addition to inline-blocks, you can achieve a similar effect with floats.
TL;DR: use flexbox if you can ignore IE9 and older; otherwise try a (css) table. If neither of those options work for you, there are negative margin hacks, but these can cause weird display issues that are easy to miss during development, and there are layout limitations you need to be aware of.
For the parent:
display: flex;
For children:
align-items: stretch;
You should add some prefixes, check caniuse.
I found a lot of answers, but probably the best solution for me is
.parent {
overflow: hidden;
}
.parent .floatLeft {
# your other styles
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
You can check other solutions here http://css-tricks.com/fluid-width-equal-height-columns/
Please set parent div to overflow: hidden
then in child divs you can set a large amount for padding-bottom. for example
padding-bottom: 5000px
then margin-bottom: -5000px
and then all child divs will be the height of the parent.
Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)
.parent{
border: 1px solid black;
overflow: hidden;
height: auto;
}
.child{
float: left;
padding-bottom: 1500px;
margin-bottom: -1500px;
}
.child1{
background: red;
padding-right: 10px;
}
.child2{
background: green;
padding-left: 10px;
}
<div class="parent">
<div class="child1 child">
One line text in child1
</div>
<div class="child2 child">
Three line text in child2<br />
Three line text in child2<br />
Three line text in child2
</div>
</div>
Example: http://jsfiddle.net/Tareqdhk/DAFEC/
Does the parent have a height? If you set the parents height like so.
div.parent { height: 300px };
Then you can make the child stretch to the full height like this.
div.child-right { height: 100% };
EDIT
Here is how you would do it using JavaScript.
CSS table display is ideal for this:
.parent {
display: table;
width: 100%;
}
.parent > div {
display: table-cell;
}
.child-left {
background: powderblue;
}
.child-right {
background: papayawhip;
}
<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>
Original answer (assumed any column could be taller):
You're trying to make the parent's height dependent on the children's height and children's height dependent on parent's height. Won't compute. CSS Faux columns is the best solution. There's more than one way of doing that. I'd rather not use JavaScript.
I used this for a comment section:
.parent {
display: flex;
float: left;
border-top:2px solid black;
width:635px;
margin:10px 0px 0px 0px;
padding:0px 20px 0px 20px;
background-color: rgba(255,255,255,0.5);
}
.child-left {
align-items: stretch;
float: left;
width:135px;
padding:10px 10px 10px 0px;
height:inherit;
border-right:2px solid black;
}
.child-right {
align-items: stretch;
float: left;
width:468px;
padding:10px;
}
<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>
You could float the child-right to the right, but in this case I've calculated the widths of each div precisely.
I have recently done this on my website using jQuery. The code calculates the height of the tallest div and sets the other divs to the same height. Here's the technique:
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
I don't believe height:100% will work, so if you don't explicitly know the div heights I don't think there is a pure CSS solution.
If you are aware of bootstrap you can do it easily by using 'flex' property.All you need to do is pass below css properties to parent div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
where .homepageSection is my parent div.
Now add child div in your html as
<div class="abc col-md-6">
<div class="abc col-md-6">
where abc is my child div.You can check equality of height in both child div irrespective of border just by giving border to child div
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
I used inline style just to give idea.
I can see that the accepted answer uses position: absolute; instead of float: left. In case you want to use float: left with the following structure,
<div class="parent">
<div class="child-left floatLeft"></div>
<div class="child-right floatLeft"></div>
</div>
Give position: auto; to the parent so that it will contain its children height.
.parent {
position: auto;
}
.floatLeft {
float: left
}
I learned of this neat trick in an internship interview. The original question is how do you ensure the height of each top component in three columns have the same height that shows all the content available. Basically create a child component that is invisible that renders the maximum possible height.
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>