I want to have a table (with an arbitrary number of columns) floated left, and some text floated left next to it if there is space, or down below it if there is not.
<div class="table">
<table>... table with arbitrary number of columns</table>
</div>
<div class="content">
Headings and paragraph text here (in a separate column, not flowing around the table)
</div>
I'd like the layout to be as follows:
I've started by just applying { float: left } to both divs, but it's not working - the second div is always below the first. Why? I thought float: left should wrap text.
JSFiddle here: http://jsfiddle.net/R9axt/1/
Remove float:left from the .visualisation-moreinfo class as it will stretch it to the left below the table and there is no need to set display:table to a table
.visualisation-moreinfo {
border: 1px solid red;
overflow:hidden;
/* float:left */ Removed */
}
Demo
Please try this FIDDLE. there is slight changes in your CSS. May solve your problem.
.visualisation-table {
border: 1px solid blue;
float: left;
width: 48%;
}
.visualisation-moreinfo {
border: 1px solid red;
width:48%;
float: left;
}
Related
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
I'm trying to use inline-block divs to create a two-column feed (like google+ or pinterest), and for a number of reasons can't use CSS3 columns (partially because both columns should fill with the first elements, not just the first column). Ideally, I'd also like to avoid Javascript, but if that's impossible then whatever.
I've created this:
http://jsfiddle.net/JWjxP/1/
and am wondering why the div labeled '4' doesn't flow to fill the gap above it (like 3 does). I'd like for all the divs to begin at where the div above ends, with no space in between.
All the divs have the following rules (plus various heights):
.test1, .test2, .test3 {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
float: left;
}
and the wrapper has the following rules:
.content {
background: #999;
height: 100%;
text-align: left;
}
You can accomplish this by breaking your test divs into two parent divs and applying inline-block display to those parents instead of the test divs themselves. This allows content to flow freely within the parent, and allows the divs to be positioned beside one another with no "gap" above.
HTML:
<div class="pure-u-3-4 content">
<div class="left">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
<div class="right">
<div class="test3">4</div>
<div class="test1">5</div>
<div class="test2">6</div>
</div>
</div>
CSS:
.left, .right {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
margin-right:-4px;
vertical-align:top;
}
.test1, .test2, .test3 {
width:100%;
}
FIDDLE: http://jsfiddle.net/JWjxP/27/
I have the following html:
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1</div>
...
<div class="floating">wookie5</div>
</div>
</div>
Consider it's like an image gallery.
main_container has an unfixed size, it's set as a percentage of the user resolution.
I want sub_container to have the exact width of the sum of the floating div.
If I use "display:table;" for sub_container and "display: inline-block;" for floating divs, it works fine:
until I have enough div in the list, so that the sum of width is larger than main_container and they break on the next line:
But still, I want subcontainer (yellow background) to to be ALWAYS the EXACT WIDTH of the sum of the divs, even when they go on several lines, like this:
I've googled for hours now, and wasn't able to find an elegant solution (css only, if possible.)
Here's the jsfiddle, to play with this.
Pure CSS Solution
The problem is that for the items to "know" to wrap to the next line, the container has to have "filled" its available horizontal space, which is your .main_container width. Yet you want the background to not go beyond what is needed for the actual elements themselves. So I've used the elements themselves to create the background with the help of cobbled together pseudo-elements.
Here's the fiddle (tested in IE9, Firefox 18, Chrome 24 on a Win 7 machine)
What I am doing is piecing together the background with each individual .floating element, which makes the right most element to be the right border control for the size of the background (note the two different width examples in the fiddle).
The explanation of each part is given in the comments below. There are a two key limitations to note:
The .floating cannot have a position set, so that is a potential limitation based on particular application.
The background needs to be either a solid color or purely vertical oriented "motion" (i.e. a gradient fading from top to bottom, or horizontal lines would work).
KEY CSS (with explanatory comments)
.sub_container {
border-left: 1px solid #333; /* forms its own left border */
overflow: hidden; /* needed for background and border to work */
position: relative; /* positioning background off this */
z-index: 1; /* needs a stacking context */
}
.floating {
font-size:20px;
line-height:30px;
padding:0 5px 0 5px;
border: 1px solid black;
margin: 3px;
display: inline-block;
/* NOTE: CANNOT be given positioning */
}
.floating:after {
content: '';
position: absolute; /* will position off subcontainer */
border-top: 1px solid black; /* makes the top/bottom border itself */
border-bottom: 1px solid black;
z-index: -1; /* push it to the background */
top: 0; /* set it to top of sub_subcontainer */
bottom: 0; /* set it to bottom of sub_container */
margin-left: -100%; /* shove it past the far left edge of sub_container */
/* next, use padding to bring it back to its position at the end
of the text string of .floating */
padding-left: 100%;
/* next, add enough padding on the right to compensate for the right
padding, right margin, and right border of .floating */
padding-right: 9px;
background-color: yellow; /* set your background color */
/* NOTE: this will not work with a background image that
has any horizonal differences to it (top to bottom
gradient would probably be okay) */
}
.floating:before { /* make right border */
content: '';
padding-top: 10000px; /* give it some obscene height that will not be exceeded */
margin: -5000px 0; /* counter the padding height by half size margins top/bottom */
/* next, push this behind the background with an even lower z-index
to hide it if it is not the right most element beign used to
form the right border */
z-index: -2;
border-right: 1px solid black; /* make the right border */
float: right; /* get the before element to the right */
position: relative; /* needs to be adjusted in position */
right: -9px; /* move it same as padding-right of the after element */
display: block; /* give it a display */
}
I got bored trying this and created a JS script based on jQuery to solve it.
var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());
Demo
Reread your question...since you won't commit to anything (max-width:80%, 500px, etc) I broke everything on the 4th child - per your example.
CSS
.main_container, .sub_container, .floating { outline:1px solid black }
.sub_container { background-color:yellow; display:table; padding-left:5px }
.floating {
float:left;
padding:5px;
margin:5px 5px 5px 0;
}
.floating:nth-child(4n+5) {
clear:left;
float:left;
}
HTML
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1</div>
<div class="floating">wookie2</div>
<div class="floating">wookie3</div>
<div class="floating">wookie4</div>
<div class="floating">wookie5</div>
<div class="floating">wookie6</div>
<div class="floating">wookie7</div>
<div class="floating">wookie8</div>
<div class="floating">wookie9</div>
</div>
</div>
EDIT (option 2)
I don't believe what you're trying to do can be accomplished by HTML/CSS alone. I offer another solution based on a hunch...and your Image Gallery comment.
CSS
.main_container, .sub_container, .floating { outline:1px solid black }
.main_container {
text-align:center
}
.sub_container { background-color:yellow; display:inline-block; max-width:80%; }
.floating {
display:inline-block;
padding:5px;
margin:5px;
}
HTML
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1wookie1wookie1</div>
<div class="floating">wookie2</div>
<div class="floating">wookie3</div>
<div class="floating">wookie4</div>
<div class="floating">wookie5</div>
<div class="floating">wookie6wookie6</div>
<div class="floating">wookie7wookie7wookie7</div>
<div class="floating">wookie8</div>
<div class="floating">wookie9</div>
</div>
</div>
It does not make .subcontainer snap to the contents; however, (using max-width) it does allow you to give it some breathing room from the main container and its children can be of various sizes.
Delete main container width and .sub_container position absolute and you should be good to go.
.main_container {
#width:380px;
}
.sub_container {
#position: absolute;
}
Use span element instead of div for "sub_container"
.sub_container{background-color:yellow;}
I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>
I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.
This sounds so simple that I though the following Markup and CSS would give me the desired result:
<div class="left">Content</div>
<div class="right">Content</div>
div.left {
float: left;
width: 200px;
}
div.right {
width: 200px;
This doesn't work as expected, instead the right div appears on the next line as though it wasn't floated. This is best explained in this example webpage:
Example of the Problem
My question is WHY this doesn't work as expected? Not how to fix it.
Notes:
Please make sure you fully understand how floats work before answering this question.
Please make sure you view and understand the examples.
Both elements must be block, not inline.
I understand all fixes/hacks to make this work. I want to know why it doesn't work.
This appears to only work correctly in Opera.
Backing up your answer with documentation is required.
It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –
div.left {
float: left;
width: 200px;
height:200px;
background:red;
}
div.right {
float:right;
width: 200px;
height:200px;
background:blue;
}
see http://jsfiddle.net/3kUpF/
Alternatively, if you want them side by side then you can float:left on both
see http://jsfiddle.net/3kUpF/1/
Floating elements can flow "into" block elements, occupying the same line but pushing the contents (not the element itself) over. In this case, left is "inside" right, but there isn't any space left for the text on the right, so it goes underneath. To see what I mean, try setting the width of right to 300px instead of 200px - you should see the blue border "around" left, with the text flowing around it. To "fix" this, I'd suggest giving right a float of left or a display of block-inline.
Float both divs left.
Apply a positive left margin of width(div.right), in your case 200px.
Apply a negative left margin of width(div.left) + width(div.right), in your case, 200px + 200px = 400px.
div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }
The second element should be inline element.
div.right {
width: 200px;
display: inline;
}
If you do not want to make second element inline, just float it to the left too. But your container will collapse. You can fix it using clear:
<div id="container">
<div class="left">Content</div>
<div class="right">Content</div>
<br style="clear:both"/>
</div>
div.left {
float: left;
width: 200px;
border: 1px solid red;
}
div.right {
width: 200px;
border: 1px solid green;
float:left;
}
#container{
border: 1px solid black;
}
See example
You could add clear:both; your <p> tags. That would solve the problem. Without breaking the rest of the (example) page.
in case you want both containers to float besides each other, you can rather use a span instead of a div. That might bring the problem to an end.