Here is the HTML page's code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.image {
float: left;
}
</style>
</head>
<body>
<div id="image-gallery">
<div class="image">
<h3>Stack Overflow</h3>
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69" />
</div>
<div class="image">
<h3>Meta Stack Overflow</h3>
<img src="http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png?v=d65f9368620d" />
</div>
</div>
<h1>Title</h1>
</body>
</html>
And here is what the page then looks like:
What I want is for the page to look like this:
The problem is that the code underneath the #image-gallery is aligned beside the image gallery, since the divs inside are using the property float: left. As you can see in the images, the Title is not where I want it to be.
I am using the float: left property so that all of the images are beside each other. But I cannot use padding to force the Title into its proper place because the width of the page changes, which means the images might be stacked in more than 1 row.
How can I put the Title so it is always below the #image-gallery?
You should clear the floats, either with:
#image-gallery {
overflow: auto;
}
Or, use the micro clearfix hack.
#image-gallery:after {
content: "";
display: table;
clear: both;
}
Use display:inline-block; instead of float, and a div or display:block; for the title.
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 have a piece of fixed html which is beyond my reach to change and I would like to style it to my liking, but I can't figure out how. This is what I have:
<a title="some title" href="...">
<img src="....jpg"></img>
Some text
</a>
CSS:
div.container-outer {
width: 25%;
float:left;
}
div.container-inner {
width: 156px;
margin: 5px;
}
div.container-inner img {
max-width: 156px;
max-height: 124px;
}
I would like the text centered under the img, and both text and img centered in a fixed width containing div. The width and height of the images are unknown, but there is a max-width and a max-height, and the max-width is smaller than the containing div. Also, the bottom of the picture should be at a fixed position inside the containing div.
I'm free to modify the html around this code snippet.
Is this even possible? I have bashed my head into the wall for the last hour and I'm still clueless....
Best Regards,
Markus
edit 130513 ------------------------------------------------
Added current CSS. This leaves me with the image left-aligned, and the text below also left aligned. If the image changes height then the bottom part of the image moves since it is top aligned.
Have you tried
<div style="text-align:center">
<img src="..." alt="..." /><br />
<span>text<span>
</div>
You can style the div's width in the style param itself. You need to BR after the img because img are inline objects like loose text (text not wrapped inside a P element or something.
The span is only there because you can later style it
So far I haven't managed to do this in CSS... could you use Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
div.container-inner {
width: 156px;
text-align: center;
border: 1px solid red;
}
</style>
<script>
function addBr() {
document.getElementById('container-inner').innerHTML = document.getElementById('container-inner').innerHTML.replace(/(<img.+?>)/, '$1<br>');
}
</script>
</head>
<body onload="addBr();">
<div id="container-inner" class="container-inner">
<a title="some title" href="...">
<img src="images/sample.jpg">
Some text
</a>
</div>
</body>
</html>
Demo: http://doug.exploittheweb.com/SO/16521934.html
FWIW, </img> is not valid HTML and almost certainly won't be present in .innerHTML even if it's there in the source code.
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/
i have a div who have some image inside them. i need to show them in center align means if i normally put that they align left.
the image is dynamic maybe it's small or big. i need to show them in middle in every condition.
how i can do this using css. any trick to do this
Use this:
img {
margin-left:auto;
margin-right:auto;
display: block;
}
Here is a sample page:
<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#container {
background-color: yellow;
width: 500px;
height: 300px;
}
img {
margin-left:auto;
margin-right:auto;
display: block;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt=" " />
</div>
</body>
</html>
Anyway, you have to try it in all the browsers, I'm not sure if it works in all of them.
Centering stuff in HTML with CSS is one of the most painful things.
You could try applying the style text-align: center to the div.
I you need the image to be at the horizontal center you can use the text-align: center on the div container as shown here
But if you need the image to be horizontal and vertical center then it will be easy to do as given here using the background style property
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.