JS Fiddle: https://jsfiddle.net/7p81bnto/2/
HTML:
<body>
<main>
<div>
<div style="
height: 50px;
width: 200px;
background-color: green;
float: right;
"></div>
<div style="
height: 50px;
width: 100%;
background-color: yellow;
display: table;
padding-top: 50px;
"></div>
</div>
</main>
</body>
Viewing these in Firefox and Chrome gives different layouts.
Can anyone explain why that is the case. I suspect it is related to the display:table property, but I don't really understand why.
For annoying reasons, I can't remove the display:table, but I need to get the body of the lower div lined up below the floating div.
Can anyone suggest how to achieve this consistently across both browser?
You can add:
float: right
to both divs and achieve the same look in both browsers.
Fiddle: https://jsfiddle.net/75ux730g/2/
It turns out that {clear: both} also achieves a correct look, and I think is arguably a better solution (by which I mean, one that ends up with CSS that more accurately reflects my design desires.)
Related
I need to display text around a floated element that itself has been pushed downwards. The HTML/CSS is very simple:
<div id="container">
<div id="shim"></div>
<div id="myimg"></div>
<p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>
CSS:
#container {
width: 200px;
}
#shim {
float:right;
width: 1px;
height: 40px;
background-color: red;
}
#myimg {
clear:both;
float:right;
width: 100px;
height: 40px;
background-color: blue;
}
It works perfectly in Chrome and Firefox, however in Safari the text overwrites my floated element.
I've created a fiddle to demonstrate the bug (obviously, you'll need safari to see it):
http://jsfiddle.net/8JLFp/
Can anyone find a solution or suggest another way of doing this?
Please check the same issue on this site. May be this helps you.
Possible Solutions.
Try adding clear:both divs
Use overflow:hidden
I know this might be an old question, but its still valid today.
I got mine fixed by adding to the parent tag :
style="width: 100%;"
Which in your case, the div with id=container.
Hope this helps.
I've been trying all day to get a container to display its content in the form of columns and expand towards the side instead of down when the number of children div's increases. I've tried everything from -vendor-box-orient layout to inline-block, nothing seems to be working. Here is the use case.
<div class="container">
<div class="row">
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
The .container is supposed to be overflow-x:scroll while .row is supposed to exceed .container if it has enough children to do so, instead of leaving overflow visible. So, how can I get .row to collapse to the width of its collective children as it would work if it was vertical?
Use case: JSfiddle
Looking at your fiddle demo, I found this answer by ThirtyDot (fiddle here) and adapted to do the same thing for right-flowing content to be right-fitted. I'm not entirely I got the scroll feature right, but let me know. This should work with elements other than UL and LI as well, but I haven't modified the markup to check yet.
Of course, this uses the weird and wonderful display: table- properties. Doing that, it was bound not to be supported by some legacy browser. See When Can I Use? for details on support.
I tested the following:
Firefox 13 - Works
Chrome Latest - Works
Opera 11.67 - Works
IE 8 - Works
IE 9 - Works
IE 7 - Does NOT Work
Safari - Untested
So if IE7 support is critical, this won't work for that browser at least. But unless I've misunderstood something, it works great in all the others.
Markup
<div>
<div class="super-scroller">
<ul class="horizontal-fit">
<li class="outer-block"><span class="inner-block"></span></li>
</ul>
</div>
</div>
CSS
.super-scroller {
border: 1px solid green;
overflow-x: scroll;
padding: 5px;
margin: 10px auto;
width: 90%;
}
.horizontal-fit {
display: table;
border: 1px solid blue;
}
.horizontal-fit .outer-block {
display: table-cell;
}
.horizontal-fit .inner-block {
display: block;
border: 1px solid red;
text-align: center;
margin: 5px;
width: 100px;
height: 100px;
}
http://jsfiddle.net/suJ3d/2/
Interactive demo:
http://jsfiddle.net/userdude/suJ3d/5/embedded/result/
Here's a working example. The red div's move inside the blue div.
The key was
overflow-x:scroll;
white-space: nowrap;
on the outer div and
display:inline-block;
on the inner div
http://jsfiddle.net/WTw2P/2/
<div id="top">
*height: auto;
min-height: 100%;*
<div id="content">
*min-height: 500px;*
</div>
<div id="middle">
*css ???*
</div>
</div>
<div id="footer">
</div>
This code works nice when the screen size is normal. But in full screen mode, the footer goes to the bottom of the page (wanted behaviour) but the ''middle'' div must increase its height to get the footer. I mean, the 3 elements (content, middle and footer) must be continuous.
Which css rules should I use to do this behaviour?
Thanks in advance!
UPDATE.
I've used a couple css rules and works, but don't in IE8 (works in IE9, Chrome, FF3 e FF4). The relevant CSS is:
Top{ height: auto; }
Content{ min-height: 100%; }
Middle{ overflow: auto; padding-bottom: 130px; }
Footer{ clear: both; height: 130px; margin-top: -130px; position: relative; }
You might try CSS Media Queries with max or min-height. Examples here: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
and documentation here: http://www.w3.org/TR/css3-mediaqueries/
height:100%; should be all that is needed to make it take up the available space.
The Bad News: To be honest, mate, I don't think this is possible with this exact specification. It would take some very clever css at any rate. However, tables would work nicely. I'm completely against the idea, but if this design requirement is a must, then perhaps you should go the route.
The Good News: Depending on why it is you need them to be fluid, we could maybe give the desired effect. If it's just for backgrounds to match up, we could probably do that. Update your post with more information and I'll (hopefully) update mine with an answer.
I want to put two <div>s next to each other. The right <div> is about 200px; and the left <div> must fill up the rest of the screen width? How can I do this?
You can use flexbox to lay out your items:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.
For older browser support, you can use CSS float and a width properties to solve it.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
I don't know if this is still a current issue or not but I just encountered the same problem and used the CSS display: inline-block; tag.
Wrapping these in a div so that they can be positioned appropriately.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file.
Unfortunately, this is not a trivial thing to solve for the general case. The easiest thing would be to add a css-style property "float: right;" to your 200px div, however, this would also cause your "main"-div to actually be full width and any text in there would float around the edge of the 200px-div, which often looks weird, depending on the content (pretty much in all cases except if it's a floating image).
EDIT:
As suggested by Dom, the wrapping problem could of course be solved with a margin. Silly me.
The method suggested by #roe and #MohitNanda work, but if the right div is set as float:right;, then it must come first in the HTML source. This breaks the left-to-right read order, which could be confusing if the page is displayed with styles turned off. If that's the case, it might be better to use a wrapper div and absolute positioning:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
Demonstrated:
left
right
Edit: Hmm, interesting. The preview window shows the correctly formatted divs, but the rendered post item does not. Sorry then, you'll have to try it for yourself.
I ran into this problem today. Based on the solutions above, this worked for me:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
Simply make the parent div span the full width and float the divs contained within.
UPDATE
If you need to place elements in a row, you can use Flex Layout. Here you have another Flex tutorial. It's a great CSS tool and even though it is not 100% compatible, each day its support is getting better. This works as simple as:
HTML
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
CSS
.container {
display: flex;
width: 100%;
height: 200px;
}
.contentA {
flex: 1;
}
.contentB {
flex: 3;
}
And what you get here is a container with a total size of 4 units, that share the space with its children in a relation of 1/4 and 3/4.
I have done an example in CodePen that solves your problem. I hope it helps.
http://codepen.io/timbergus/pen/aOoQLR?editors=110
VERY OLD
Maybe this is just a nonsense, but have you tried with a table? It not use directly CSS for positioning the divs, but it works fine.
You can create a 1x2 table and put your divs inside, and then formatting the table with CSS to put them as you want:
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Note
If you want to avoid using the table, as said before, you can use float: left; and float: right;and in the following element, don't forget to add a clear: left;, clear: right; or clear: both; in order to have the position cleaned.
div1 {
float: right;
}
div2 {
float: left;
}
This will work OK as long as you set clear: both for the element that separates this two column block.
I ran into the same problem and Mohits version works. If you want to keep your left-right order in the html, just try this. In my case, the left div is adjusting the size, the right div stays at width 260px.
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
The trick is to use a right padding on the main box but use that space again by placing the right box again with margin-right.
I use a mixture of float and overflow-x:hidden. Minimal code, always works.
https://jsfiddle.net/9934sc4d/4/ - PLUS you don't need to clear your float!
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
As everyone has pointed out, you'll do this by setting a float:right; on the RHS content and a negative margin on the LHS.
However.. if you don't use a float: left; on the LHS (as Mohit does) then you'll get a stepping effect because the LHS div is still going to consume the margin'd space in layout.
However.. the LHS float will shrink-wrap the content, so you'll need to insert a defined width childnode if that's not acceptable, at which point you may as well have defined the width on the parent.
However.. as David points out you can change the read-order of the markup to avoid the LHS float requirement, but that's has readability and possibly accessibility issues.
However.. this problem can be solved with floats given some additional markup
(caveat: I don't approve of the .clearing div at that example, see here for details)
All things considered, I think most of us wish there was a non-greedy width:remaining in CSS3...
This won't be the answer for everyone, since it is not supported in IE7-, but you could use it and then use an alternate answer for IE7-. It is display: table, display: table-row and display: table-cell. Note that this is not using tables for layout, but styling divs so that things line up nicely with out all the hassle from above. Mine is an html5 app, so it works great.
This article shows an example: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
Here is what your stylesheet will look like:
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
To paraphrase one of my websites that does something similar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
just use a z-index and everything will sit nice. make sure to have positions marked as fixed or absolute. then nothing will move around like with a float tag.
After lots of attempts and search I have never found a satisfactory way to do it with CSS2.
A simple way to accomplish it is to wrap it into a handy <table> as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?
table {
margin: 0 auto;
}
<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>
What I want to know is how to do it without a fixed width and also being a block.
#Jason, yep, <center> works. Good times. I'll propose the following, though:
body {
text-align: center;
}
.my-centered-content {
margin: 0 auto; /* Centering */
display: inline;
}
<div class="my-centered-content">
<p>test</p>
<p>test</p>
</div>
EDIT #Santi, a block-level element will fill the width of the parent container, so it will effectively be width:100% and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try display: inline-block;. Firefox might complain, but it's right. Also, try adding a border: solid red 1px; to the CSS of the .my-centered-content DIV to see what's happening as you try these things out.
This is going to be the lamest answer, but it works:
Use the deprecated <center> tag.
:P
I told you it would be lame. But, like I said, it works!
*shudder*
I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.
Another thing to keep in mind is that the <div> will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.
The following works well enough. note the position, and the use of auto
<div style="border: 1px solid black;
width: 300px;
height: 300px;">
<div style="width: 150px;
height: 150px;
background-color: blue;
position: relative;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;">
</div>
</div>
NOTE: not sure if it works in IE.
In FF3, you can:
<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>
This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)
Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I'm not sure if you'd class that as a 'quirky trick', though.
It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.
#wrapper {
width: 100%;
border: 1px solid #333;
}
#content {
width: 200px;
background: #0f0;
}
<div id="wrapper" align="center">
<div id="content" align="left"> Content Here </div>
</div>