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.
Related
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
I'm trying to make a DIV that's pretty much a box with a border that has a left-aligned image and text that's to the right of the image. Here's how I have it set up:
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
</div>
The problem is that, if the image is taller than the text, the surrounding DIV (and therefore the border) sizes itself to become the height it needs to be to fit in all the text, but the image overflows out of the DIV.
How can I make the DIV change its height to fit whichever is taller (the image or the text) so that both fit within the border?
Thanks.
Add display: inline-block" to your div.
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;display: inline-block">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
</div>
add one property to div
overflow: hidden;
absolutely it will work .
Add some element with clear: both; to "reserve" space for floated elements:
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
<div style="clear: both;"></div>
</div>
I would use clearfix, you can learn more about it here
Plus, careful, there is no border-size attribute, what you were trying to do was border-width.
Just my opinion here, it is best practices not using inline styles.
This way you have a clean solution.
So please see snippet below:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
div {
padding: 1%;
border: 1px solid #000;
width: 100%;
}
div > img {
float: left;
max-width: 30%;
max-height: 200px;
}
<div class="clearfix">
<img src="http://i.imgur.com/FwgZFNn.jpg" />Here is some text.
</div>
Just before the end of the div i.e before </div>, you need to clear the float. The error is due to float style of the image. To clear the float just add this
<span style="clear:both;"></span>
Just before the </div> tag.
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 float two divs inline with each other inside a div of set width. Additionally they have borders and content that requires wrapping. It stops working when there's more content than fits on one line.
I'm trying to be avoid using tables to solve this (see solution below) but but no luck so far. Any one got any ideas?
Edited question: expanding requirements to include:
the divs should minimise their total width and not expand beyond the boundarys of the two main 50% columns. I've managed to achieve the first and second part (please see my own answer below) however I have an additional third requirement in that as these can be nested, the content then still stays within the two main columns but doesn't expand to fill up to a maximum width of 50% of the columns width. I'm working on a javascript solution which I won't be able to post back for some time.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
body {
width: 1024px;
}
.a_column {
width: 50%;
float:left;
}
.some_text {
float:left;
display:inline;
border: thin solid green;
}
.a_block {
float:left;
display:inline;
border: thin solid red;
/*width: I can't set this as I don't know how much some_text will need, this can vary from nothing to a lot.*/
word-wrap: break-word; /* this doesn't work without a width specified*/
}
/*solution when using tables */
.some_text_in_table, .a_block_in_table {
vertical-align:top;
}
.some_text_in_table div {
border: thin solid green;
}
.a_block_in_table div {
border: thin solid red;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="a_column">
<div class="some_text">
some text here.
</div>
<div class="a_block">
Less text and there's no problem.
</div>
</div>
<div class="a_column">
<div class="some_text">
some text here.
</div>
<div class="a_block">
Putting a lot of text into a div that you want a border around will
cause it to move down one line. Instead I'd like it to float inline
with its sibling div; you can remove the float:left but then it
completely messes up the border. An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of
a_column be set and I can't do this as I don't always know how much
room some_text will need.
</div>
</div>
<div style="clear:both;"></div>
<h3> With tables, solution with in 7 minutes. So much easier:</h1>
<table style="table-layout: fixed; width: 100%;">
<tr>
<td colspan="2" style="width: 50%;">
</td>
<td colspan="2" style="width: 50%;">
</td>
</tr>
<tr>
<td class="some_text_in_table">
<div>
some text here.
</div>
</td>
<td class="a_block_in_table">
<div>
some text here.
</div>
</td>
<td class="some_text_in_table">
<div>
Less text and there's no problem.
</div>
</td>
<td class="a_block_in_table">
<div>
Putting a lot of text into a div that you want a border around will cause it to move down one line. Instead I'd like it to float inline with its sibling div; you can remove the float:left but then it completely messes up the border. An_additional_thing_I'd_like_is_for_long_sentences_to_be_broken_by_the_word_wrap,_but_this_requires_that_the_width_of a_column be set and I can't do this as I don't always know how much room some_text will need.
</div>
</td>
</tr>
</table>
</body>
</html>
Fiddle with my code here: http://jsfiddle.net/cdepZ/
display:table-cell;
Example: http://jsfiddle.net/TAhAv/
You are right in wanting to avoid tables with this layout - as you mentioned, this is not tabular data which you are chosing to display.
You mention in your CSS that you cannot set a width on .a_block because you do not know how much space you need. However, when you use a table you are actually setting a width (25%) as each cell is equally split amongst the over-all width.
So to achieve what you want to do (which will match the tables layout), you will have to set a width on these elements.
Here is a JSFiddle of how you could achieve this:
http://jsfiddle.net/ndhrd/39/
Set your widths properly with the space you have. Borders take 2px vertically and horizontally as well.
.a_column {
width: 512px;
float:left;
}
.a_block, .some_text{
width: 254px;
float: left;
word-wrap: break-word;
}
.a_block{
border: 1px solid green;
}
.some_text{
border: 1px solid red;
}
I got it working here:
http://jsfiddle.net/cdepZ/7/
Putting a lot of text into a div is now no problem, it will wrap and break any long sentences that go over 50% of it's parent divs' width. And it will minimise any content that it can whilst maintaining good looking borders.
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
I think the only solution is a javascript one :|
http://jsfiddle.net/uHEVJ/1/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
body {
width: 1024px;
}
.a_column {
width: 49%; /* 49% rather than 50% to cope with the 1 pixel width borders*/
float:left;
border: thin solid blue;
}
.a_container{
display:inline;
}
.a_container > div{
max-width: 49%; /* 49% rather than 50% to cope with the 1 pixel width borders*/
float: left;
word-wrap: break-word;
}
.some_text {
border: thin solid green;
}
.a_block {
border: thin solid red;
}
</style>
</head>
<body>
<h3> Used a "display:inline;" div as a container to position each Div inside which has float:left (to minimise it's size)</h3>
<div class="a_column">
<div class="a_container">
<div class="some_text">
some text
</div>
</div>
<div class="a_container">
<div class="a_block">
Less text and there's no problem.
</div>
</div>
</div>
<div class="a_column">
<div class="a_container">
<div class="some_text">
some text here.
</div>
</div>
<div class="a_container">
<div class="a_block">
Putting a lot of text into a div is now no problem, it_will_wrap_and_break_any_long_sentences_that_go_over_50%_of_it's_parent divs' width. And it will minimise any content that it can whilst maintaining good looking borders
</div>
</div>
</div>
<div class="a_column">
<div class="a_container">
<div class="some_text">
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
</div>
</div>
<div class="a_container">
<div class="some_text">
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
<div>
<div class="a_container">
<div class="a_block">
some text
</div>
</div>
<div class="a_container">
<div class="a_block">
Nesting this structure can keep it with in the limits of the .a_column but then doesn't allow all elements to expand fully.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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/