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;
}
I'm trying to accomplish something that I thought would be simple, but it seems that when it comes to CSS, you never know!
I have an image float to the left. Beside it, I have a title and under that title, but still besides the image, I want to display a table taking all the remaining width. In IE and Chrome, the table ends up under my image while in Firefox, it takes more that 100% (an horizontal scroll bar is displayed). Firefox gives a result closer to what I want, but I don't want the scrollbar.
Here some code that I tried to make work using w3school "try it" editor (http://www.w3schools.com/css/tryit.asp?filename=trycss_float)
<html>
<head>
<style type="text/css">
h1{
font-size:1em;
}
img
{
float:left;
}
.field{
width:100%
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<div class="content">
<h1>this is the title</h1>
<form>
<table width="100%">
<tr>
<td><input type="text" class="field"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
I know the structure is too complex for that simple form, but forms are automatically generated by a PHP script so I'd like to keep it that way.
Because you have a floated image taking horizontal space from the .content div is why you get the extended table. The .content div is not aware of the floated image width. You can offset this by placing a margin at least the width of the image on the .content div.
.content
{
margin-left: 95px;
}
fiddle
Try setting your <table> to display: block in the CSS and dropping the width="100%" attribute:
table {
display: block;
}
http://jsfiddle.net/ambiguous/dyxw7/
The above example includes a red border on the table so that you can see where it is, I also changed the image to a kitten to make sure it would show up.
The .content div is 100% of the page wide including the bit under the floated image so the input set at 100% is also going to be that wide, to make the .content div take up only the space that's left after the floating image you can add overflow: hidden to it, but then the input itself can use varying box models, so I would suggest using a width of 99% on it. If the content is not actually an input then maybe 100% will work for most elements ;)
e.g. x-browser-code
h1 {font-size:1em;}
table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}
.content {overflow: hidden;}
form {padding: 0; margin: 0;}
img {float:left;}
.field {
width:99%;
margin: 0 auto;
}
I think you have to float your table along with your image and remove the width:100% on your table.
<div id="content">
<div id="side_bar" style="float:left;">image</div>
<div id="main_content" style="float:left;">table</div>
<div style="clear:left;"></div>
</div>
or the old way
<table>
<tr>
<td>image</td>
<td>table</td>
</tr>
</table>
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.
Is there a way to have two columns, that match each other in height, without using table cells, fixed heights or Javascript?
Using a TABLE
<table>
<tr>
<td style="background:#F00;">
This is a column
</td>
<td style="background:#FF0;">
This is a column<br />
That isn't the same<br />
height at the other<br />
yet the background<br />
still works
</td>
</tr>
</table>
Using DIVs
<div style="float:left;background:#F00" >
This is a column
</div>
<div style="float:left;background:#FF0" >
This is a column<br />
That isn't the same<br />
height at the other<br />
yet the background<br />
still works
</div>
<div style="clear:both;" ></div>
The goal is to make both backgrounds extend the full height regardless of which side is taller.
Nesting one in the other wouldn't work because it doesn't guarantee both side are the correct height.
Unfortunately, the preview showed the working HTML, but the actual post stripped it out. You should be able to paste this into an HTML file and see what I mean.
http://www.xs4all.nl/~peterned/examples/csslayout1.html
this is the kind of thing you want, give them both a height of 100% (using this css trick) and they'll stretch out to the height of the containing div!
edit: forgot to mention, put them in a container div!
Edit:
<html>
<head>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
#container
{
background-color: #333333;
width: 500px;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
#colOne, #colTwo
{
width: 250px;
float: left;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
#colOne
{
background-color: #cccccc;
}
#colTwo
{
background-color: #f4f5f3;
}
</style>
</head>
<body>
<div id="container">
<div id="colOne">
this is something</div>
<div id="colTwo">
this is also something</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Just because nobody's said this, a lot of times people just fake the existence of even columns, by having a background image which tiles itself all the way to the bottom of the outer container.
This gives the appearance that the content is in two equal columns, even though one ends before the other.
Use the Faux Column CSS technique to solve this problem.
Given the following:
<div class="contentSidebarPair">
<div class="sidebar"></div>
<div class="content"></div>
</div>
You can use the following styles:
/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
#FFF is the bgcolor of your content */
div.contentSidebarPair {
background: #FFF url('sidebar.gif') repeat-y top left;
width: 800px;
margin: 0 auto; /* center */
zoom: 1; /* For IE */
}
/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div.sidebar {
float: left;
width: 200px;
}
div.content {
float: left;
width: 600px;
}
There! Simple and effective. Absolutely zero JavaScript involved. And if you want to create more complex layouts (liquid layouts), you can adapt this technique using background-position. A tutorial is available here.
display:inline-block
With a trick, it even works in IE:
<div><span>
col1
</span></div>
<div><span>
col2
</span></div>
div {display:inline;}
span {display:inline-block;}
Yes, it is possible - pure CSS and no hacks - equal height columns.
Check this this article - it is very well written.
It's straightforward if you are dealing with browsers which support CSS2.1 (IE8 and above, all other major browsers). If this is your markup:
<div>
This is a column
</div>
<div>
This is a column<br />
That isn't the same<br />
height at the other<br />
yet the background<br />
still works
</div>
This would be your CSS:
div { display: table-cell; }
If you need more than one row in the layout you will have to add some wrapper elements in there, but otherwise this works straight off.
Theres a simple way of achieving this with clever HTML and CSS.
First the HTML:
<div id="container">
<div id="col1">
this is column 1
</div>
<div id="col2">
this is column 2<br />
it is obviously longer than the first column <br />
YEP!
</div>
</div>
Please note the lack of clear:both unsemantic div.
Now the CSS:
#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }
The overflow hidden in the container rule makes sure that the container expands to the size of the contained floated divs (and gets rid of the unsematic clearing div that everyone loves so much).
The background of the container applies to the first column. The background of the col2 div applies only to the second div. This is what gives us the illusion that both divs are always the same height.
Simple, semantic solution in 3 lines of CSS. Enjoy
EDIT: Please comment on reason to vote down, otherwise I have to guess why my answer is wrong. In this case I had forgot to add the width property to the container so that it plays nice with IE6/7. Please check the revised CSS above.
<div>
<span>left</span>
<span>right</span>
<!-- new line break, so no more content on that line -->
<table>
...
</table>
</div>
How can I position those spans (they can be changed to any element) so that depending on how big the table is (not defined anywhere, and shouldn't be) the spans are positioned just on top of the left side of the table and the right side of the table.
Example:
a b
table0
table1
table2
(where a is the left span, and b is the right span)
P.S. You can change anything bar inner table html.
<style type="text/css">
#wrapper, #top, #tableArea
{
width: 100%;
padding: 10px;
margin: 0px auto;
}
#top
{
padding: 0px;
}
#leftBox, #rightBox
{
margin: 0px;
float: left;
display: inline;
clear: none;
}
#rightBox
{
float: right;
}
</style>
<div id="wrapper">
<div id="top">
<div id="leftBox">A</div>
<div id="rightBox">b<</div>
</div>
<div id="tableArea">
<table> ... </table>
</div>
</div>
Doesn't place them relatively, nor
does Rob Allen's answer, they put them
at the far reaches of the browser not,
within the table width.
Well they are going to be bound by their container width and Rob's answer makes both the table and container width 100%.
The only solution I can think of off hand is to put in a row in your table with a single column (spanning all columns) and in that row have your floated DIVs.
I ran into similar problem and I have found a solution. It doesn't depend on the width of the table but it is a little trickier. It works in every browser including IE5.5, IE6 and newer.
<style>
.tablediv {
float:left; /* this is a must otherwise the div will take a full width of our page and this way it wraps only our content (so only the table) */
position:relative; /* we are setting this to start the trickie part */
padding-top:2.7em; /* we have to set the room for our spans, 2.7em is enough for two rows otherwise try to use something else; for one row e.g. 1.7em */
}
.leftspan {
position:absolute; /* seting this to our spans will start our behaviour */
top:0; /* we are setting the position where it will be placed inside the .tablediv */
left:0;
}
.rightspan {
position:absolute;
top:0;
right:0;
}
</style>
<div class="tablediv">
<span class="leftspan">Left text</span>
<span class="rightspan">Right text <br /> with row</span>
<table border="1">
<tr><td colspan="3">Header</td></tr>
<tr><td rowspan="2">Left content</td><td>Content</td><td rowspan="2">Right content</td></tr>
<tr><td>Bottom content</td></tr>
</table>
</div>
<!-- If you don't want to float this on the right side of the table than you must use the clear style -->
<p style="clear:both">
something that continues under our tablediv
</p>
If you can't use a float for some reason, than you can use an alternative .tablediv style which I found by a mistake. Just replace the float:left; to display:inline-block; This works in all modern browser but not in IE7 and below.
Now you get my point and I'm sure you find any other solutions. Just don't forget that the .tablediv will be as long as the inner content. So placing a paragraph into it will cause to stretch to a bigger size than our table.
if you have divs instead of span, try float:left for span a and float:right for span b
<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>
Doesn't place them relatively, nor does Rob Allen's answer, they put them at the far reaches of the browser not, within the table width.
I can't think of anyway, except to set the width of the table to something. In my case I choose 100%, which stretches to the width of the rapper at 50em:
<style type="text/css">
#wrapper {
width: 1%;
min-width:50em;
padding: 10px;
}
#mainTable {
width:100%;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
<div id="wrapper">
<div id="leftBox">A</div>
<div id="rightBox">b</div>
<br style="clear: both" />
some text some text some text some text some text <br />
some text some text some text some text some text <br />
some text some text some text some text some text
<table id="mainTable" border="1"><tr><td>test</td><td>test 2</td></tr></table>
</div>
#MattMitchell, you might have something there. And then just use fload: left and float right I assume?