I have a div containing some text that is left floated so it can appear to the right of an image, and they're all wrapped in a container. However, I can't make the text attach to the bottom of the container. If I use position: relative on the container and position: absolute; bottom: 0 on the div containing the text, which works in most cases, the text starts rendering over the image.
Here is what I have now:
http://jsfiddle.net/RWkjL/
In short, what I want is to make this:
To look like this:
... without knowing the text's width.
Thanks!
This can be achieved using vertical-align in CSS.
HTML
<div id="container">
<img src="http://www.purac.com/_sana_/handlers/getfile.ashx/5671e36e-6ba3-4ffc-9b58-8495cc024bfa/Sample-grey.png" />
<p id="text">
Lorem ipsum <br/>
dolor sit amet
</p>
</div>
CSS
#container {
height: 128px;
}
img, #text {
vertical-align:bottom;
display: inline-block;
}
Here is an updated JSFiddle.
You can read more about vertical-align here if you need more control over it. You can specify a specific length for the vertical align to be at as well, using any CSS length unit.
Edit: Because there's no more floating, you can drop the definition of the height of the container. It is also worth noting that setting overflow: hidden; on #container would also prevent the issue of 0 height in a parent element that has only floating children.
While randak's answer is totally correct, this is another solution to your problem:
#container {
height: 128px;
position:relative;
}
#picture {
float: left;
}
#text {
float: left;
position:absolute;
bottom:0px;
left:128px;
}
Related
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
I have a question regarding a simple case where you have 2 floating elements inside a div container, and you want the height of the container to adjust appropriately.
I know that there are multiple ways to achieve this, namely using a clearing div, a clearing :after pseudo-element, setting overflow:hidden, or (like in the example below) floating the container div.
.container {
float: left;
}
.container img {
float: left;
}
.container p {
float: right;
}
<div class="container">
<img src="somePic.jpg" />
<p>Some text</p>
</div>
I know that the container div (if not floated) does not adjust the height because its children (floated) are not part of the normal flow. Can someone explain why floating the container fixes this?
Set your container display property to block or inline-block and overflow:visible makes it. See the sample code below:
.container {
display: inline-block;
overflow: visible;
float: left;
padding: 16px;
background-color: #00ff00;
}
.container img {
float: left;
}
.container p {
float: right;
}
<div class="container">
<img src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/cute-kittens.jpg" />
<p>Some text</p>
</div>
#Alexander already gives you a possible solution to your problem, but if I correctly understood, you wanted to know "why" floating the container could solve the problem.
I searched around and I did not find an exaustive answer, anyway I found reasons to avoid this method due to various drawbacks.
In general, we can say that floating an element extract it from normal document flow, and this is why its container naturally collapse to 0 height. Floating it too, extract this last one from document flow either, creating a different context that could contain floated children.
First I'll list my code and the link to JSFiddle.
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(Newer one with more content for vertical center testing)
http://jsfiddle.net/x11joex11/sDWxN/11/
What I'm trying to do is vertically center the blue highlighted DIV in the center of the red div. Is there a way to do this using inline-block and not table-cells?
The height of the containing div also HAS to be 100% not a set pixel amount.
The content will also be variable height
I am trying to avoid table-cell display because of browser bugs, but if it's the only option I would like to know that also. Any solution to this issue would be appreciative.
The art of vertical centring with inline-block is to understand that the inline-level elements are centred in their line-box. So you need to make the line-height match the height of the containing box.
The line-height is determined by a combination of the line-height setting of the containing block and the content of the line.
However the line-height of the containing box cannot be set in terms of a percentage of the height of the containing box, so that provides no solution.
Instead, we can create some content on the same line as the content we want to align that's the height of the containing block using
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
which will force the line height be tall enough to contain that content.
The other thing necessary is to note that vertical-align is applied to the boxes being aligned, rather than the containing box.
The result is http://jsfiddle.net/9j95x/
You can use:
top: 50%;
position: relative;
on #content, like so:
#content
{
display:inline-block;
background-color:blue;
position: relative;
top: 50%;
}
Fork: http://jsfiddle.net/brandonscript/sDWxN/9/
Here's my quick response: http://jsfiddle.net/H9nHh/
Basically use:
display:table; for #container
and display:table-cell; for #content. I then created another div with a class for x to style it to your needs.
I have a the following:
<div class="container">
<div class="sectionA">
</div>
<div class="sectionB">
</div>
</div>
Section A has a red background, Section B has a blue background.
Section A has lots of text in it, making it quite tall, section B does not have much text in it.
How can I make it so that Section A and B are the same height as the parent?
Yes, you can give the childs the same heights as the parent. This will work:
<html>
<head>
</head>
<body>
<div class="container">
<div class="sectionA">Lorem ipsum dolor sit amet.
</div>
<div class="sectionB">Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
The CSS:
.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}
If you dont mind about using jquery,
$('.sectionB').css('height', $('.sectionA').outerHeight() );
sectionB css height is set by the sectionA outerHeight.
Take a look to this jsbin.
Hope this helps!
If you want to do this in dynamically, I think you need to use jquery/javascript to handle otherwise you can use height property. Use the suitable highest value for both sections.
Faux-Column Effect Using <div> and CSS
One way of doing this involves adding an extra element as follows:
<div class="container">
<div class="backdrop"></div>
<div class="sectionA">
<p>Text of A... can be on a red background.</p>
<p>Lorem ipsum dolor... and long text block.</p>
</div>
<div class="sectionB">
<p>Text of B... can be on a blue background.</p>
</div>
</div>
I am going to add an extra element <div class="backdrop">, which you could replace with an pseudo-element if so desired.
The appropriate CSS is as follows:
.container {
overflow: hidden;
color: white;
background-color: red;
position: relative;
}
.sectionA {
float: left;
width: 48%;
padding: 1%;
}
.sectionB {
float: left;
width: 48%;
padding: 1%;
position: relative;
z-index: 2;
}
.backdrop {
position: absolute;
background-color: blue;
width: 50%;
height: 3000px;
top: 0;
left: 50%;
z-index: 1;
}
The parent .container element is given the background-color for the left-hand side column (red), with overflow: hidden and position: relative.
The two child/column elements are placed using float: left, and given a relative width of 48% and padding of 1% (you can adjust these measurements as needed).
Finally, .backdrop is positioned absolutely and placed to the right hand side of the parent container. I set it to have a tall height to make sure that it stretches beyond any expected height of any of the two columns, and declare the background-color: blue.
Use z-index to move the floated .sectionB to be painted above .backdrop. Note that you need set position .sectionB relatively so that the z-index value takes effect.
Since .container uses overflow:hidden, the tall backdrop element is clipped so you can the effect that you want.
Using a background-image could also work. You could create a background image with the left hand side red and the right hand side blue, and tile it vertically with position top and center, just making the width is wide enough to accommodate any expected page width.
The main advantage of using div.backdropis that you can alter the color scheme using CSS properties alone without changing the background image.
Fiddle demo: http://jsfiddle.net/audetwebdesign/yejss/
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.