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.
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.
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;
}
Before you attempt to solve this please carefully read the constraints I'm dealing with.
Constraints
.pictureContainer needs to remain position: relative (because I have a hover menu that positions absolutely relative to it.)
The image could be smaller than 80% of #slide in which case it still must align in the center. What this translates to? You can't simply do a margin: 0 10% because yes that would center this specific case, but it will not satisfy the case where the image is smaller than 80% of the width of #slide
Hello, I am inline-block element that is positioned beside another inline block element, isn't that wonderful? I think that is wonderful!
Why not simply add:
text-align: center;
to pictureContainer css declaration. It will center any image in it.
firts try to wrap your div class="pictureContainer" and give css to the wrapper
html
<div class="wrapper">
<div class="pictureContainer">
<img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="350" alt="IMAGE" />
<div class="hoverMenu">
<a class="nextSlide" href="#">
>
</a>
<a class="prevSlide" href="#">
<
</a>
</div>
</div>
</div>
css
.pictureContainer {
width: 350px;
position: relative;
background: red;
padding: 0;
margin: 0;
}
#currentPic {
vertical-align: top;
}
.wrapper {
margin:auto;
width: 350px;
}
working demohope this help
Like the answer from #jhunlio suggests:
create a wrapper around it with the follwong css
.wrapper {
margin:auto;
width: 600px;
}
The trick here is that the width is fixed and the margin is set to auto.
It means that the margin (outer space) will be equally distributed at the sides of the wrapper with the fixed width. Hence it is in the middle.
I have the following html code:
<div class="outer ui-draggable" style="position: relative;">
<div class="inner">Foo bar</div>
</div>
With this CSS:
.outer
{
background-color: #F7F085;
margin: 5px;
height: 100px;
width: 150px;
text-align:center;
vertical-align:text-bottom;
}
.outer .inner
{
display:inline;
vertical-align:middle;
height: 100px;
width: 150px;
}
I would like the inner div to fill the outer div completely - the text block should be an entire 100X150 box.
The problem is that this code doesn't produce the desired effect. The outer div is indeed the correct size, but the inner div seems to only fill a small area at the top of the outer div.
I also tried using height:inherit and width:inherit instead of specifying a size.
The problem is with the display:inline style. If you want it to behave like a normal DIV, keep it display:block. If it's display:inline it will only be as tall as the inherited line-height.
Might be because of the vertical-align style property. It is an invalid styling rule. It is only valid for <tr> <td> and <div> with display:table-cell
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.