I have been trying to solve this for a couple of hours now and I cannot get it to work.
I have a floated left & right div. The right div contains an image and the left div contains text. The image & text swap left & right according to the users preference, which is why i am using float.
How do I position the text to be at the bottom of the wrapper but next to the image?
I have a visual display below:
Here is my html code:
<div class="wrapper">
<div class"text">Text aligned at bottom</div>
<div class="photo"><img id="photograph" src="" width="140px" height="140px" /></div>
</div>
Added a <div class="inner">, and set it as display:table-cell + vertical-align:bottom, see the following demo and snippet.
Edit: also added calc() to make the photo div is only as wide as the width of the photo and the text div takes up all of the remaining width automatically.
JsFiddle Example
.wrapper {
border: 1px solid blue;
overflow: auto;
}
.wrapper .text {
float: left;
width: calc(100% - 140px);
}
.wrapper .photo {
float: right;
}
.wrapper .inner {
display: table-cell;
height: 140px;
vertical-align: bottom;
}
.wrapper .inner img {
display: block;
}
<div class="wrapper">
<div class="text">
<div class="inner">Text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom.</div>
</div>
<div class="photo">
<div class="inner"><img id="photograph" src="//dummyimage.com/140" /></div>
</div>
</div>
Related
I want to horizontal align a div that consists of two other divs:
One from the left, that will contain an image.
Other from the right, that div will contain text, aligned to the left.
The alignment will be relative to a container, and the centered div should expand to a maximum width (and not take the entire container's width).
This pen describes what i tried to do using table layout
This is the HTML
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text
</div>
</div>
</diV>
And the CSS
.container {
width: 200px;
background-color: red;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
}
.right {
background-color: blue;
display: table-cell;
vertical-align: middle;
}
As you can see, the space on the right of the blue area is part of the centered div (the green+blue area), but it makes the div's content not to be centered. What i would like is the blue area to take the width of the longest line in it
If you're wanting the blue area to dynamically grow with the text inside of it while retaining a centered area of content would the following be what you're looking for?
.container {
width: 200px;
background-color: red;
padding:0 20px;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
color:#fff;
}
.right {
background-color: blue;
display: block;
vertical-align: middle;
width:inherit;
color:#fff;
}
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text
</div>
</div>
</div>
I have three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?
I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
Is there a way with HTML and CSS to make text that floats to the left and right side of a div that will also overflow onto a new line where the right-aligned text stays to the left when it's on the new line? What I am talking about is depicted below where the gray is the div.
If the div is shrunken further, each text should wrap on its own, so it would look like this:
Left Text
Right
Text
and eventually...
Left
Text
Right
Text
All text should be on the left side if they touch; otherwise they should be on the same line left and right.
DEMO
html
<div class="a">
<div class="c" style="float:left;">Left Text</div>
<div class="c" style="float:right;">Right Text</div>
<div style="clear:both;"></div>
</div>
<div class="b">
<div class="c" style="float:left;">Left Text</div>
<div class="c" style="float:right;">Right Text</div>
<div style="clear:both;"></div>
</div>
css
.a {
width:200px;
border:solid 1px #ccc;
}
.b {
width:100px;
border:solid 1px #ccc;
}
.c {
width:100%;
max-width:100px;
}
Setting a max-width for .c to half of the width of .a will help
BUT this requires fix values for the width. It would be better to use javascript or jquery here to adjust the css according to the width values
Not certain I understand what you're saying, but I think MAYBE this is what you want:
<p class="left-text">This is some words</p>
<p class="right-text">This is some other words that wrap because there are too many in here. Holy crap this is a lot of words!!</p>
CSS:
.left-text {
margin: 0 20px 0 0;
float: left;
}
Fiddle
Maybe you want to make the left text occupy half the parent instead of just setting a margin spacer?
display: inline-block;
width: 50%;
margin: 0;
float: left;
Fiddle#2
EDIT: ok. Here you go then.
.left-text {
float: left;
margin: 0;
}
.right-text {
display: inline-block;
float: right;
margin: 0;
}
Fiddle3
Say this is the code for your div:
<div>
Text on left
Text on right
</div>
You could give these their on tag like this:
<div>
<left>
Text on left
</left>
<right>
Text on right
</right>
</div>
Then finally, you could add in the css:
<style>
left {
float: left;
}
right {
float: right;
}
</style>
I know I'm late to the party, but I hope this helps!
I have seen the answer the answer to ''Vertical Align in a Div
" and followed the Adam's answer. My problem is to how to have both image and text side by side and the text being at the middle of the image.
My JSFiddle
My tried code
CSS
.outerContainer {
display: table;
width: 100%; /* width of parent */
height:200px;
overflow: hidden;
border:1px solid green;
}
.outerContainer .innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
}
HTML
<div class="outerContainer">
<div class="innerContainer">
<div >
<img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height=50px width=50px>
<p style='display:inline-block;font-size:10px;'>Some Text</p>
</div>
</div>
</div>
My problem is to get that 'Some Text' side and at the middle of the image
**NOTE:**I know I shouldn't use inline-block here. But I don't know how to get it.
The img is supposed to have the vertical align property.
<img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height="50" width="50" style="vertical-align:middle;">