Look at this please.
http://jsfiddle.net/snw5rgx9/3/
or this new stackoverflow code snippet.
.image {
float: left;
margin-right: 10px;
}
.text {
height: 100px;
position: relative;
}
.bottom-left {
position: absolute;
bottom: 0;
}
<div class="container">
<div class="image">
<img src="http://placehold.it/100x100" />
</div>
<div class="text">
asd
<div class="bottom-left">
Delete • Edit
</div>
</div>
</div>
I have a problem with the position of a div in a div bottom left which is floated left.
Also
X | Text
| Bottom
It looks like this.
X | Text
Bottom
Thanks in Advance for informations.
I'm not sure if I fully undestand the question, but try adding margin-left for .text with the value of the image width + 10 (to align top text, which has 10px margin-left, like this:
.text {
height: 100px;
position: relative;
margin-left: 110px;
}
http://jsfiddle.net/snw5rgx9/5/
After apply the float, You need to clear the next div.
If you want clear idea about clear style Click this link..
.text {
height: 100px;
clear:both;
position: relative;
}
Related
Well im trying to achieve a basic effect of 6 images placed next to each other ( 2 rows of 3) and want to add some text over them. But the problem is (I think) in the float = left "command" in the CSS, which indeed puts my images nicely next to each other... BUT throws all of my text in the one place instead of nicely with the appropriate image. I've been sitting and thinking on this for solid few days and have no idea what to do. Hope you can help.
CSS
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
}
.image {
float: left;
clear: both;
padding: 2px;
position: relative;
}
HTML
<body>
<div class="row" style="width:1600px">
<div class="container">
<img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;" />
<p class="text">Life</p>
</div>
<div class="container">
<img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;" />
<p class="text">Trees are Cool</p>
</div>
<div class="container">
<img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
<p class="text">Radical Dinosaurs</p>
</div>
<div class="container">
<img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
<p class="text">Big Round Buttons</p>
</div>
<div class="container">
<img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
<p class="text">Run</p>
</div>
<div class="container">
<img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
<p class="text">That's Crazy</p>
</div>
</div>
</body>
Use following css, this will solve your problem
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 0;
}
.container {
display: inline-block;
box-sizing: border-box;
padding: 2px;
position: relative;
}
the problem is that you are positioning your image to relative. but your .text is direct child of .container by default .text find it's parent to be position relative but .container has not apply css property position relative then it find .container parent to be position relative and so on, in the end html is position relative that's why all your code stack on the top of each other.
SEE DEMO
try this
.contailer{
position: relative;
}
Add position: relative to the .container class, so it will be the .text element context. The element is positioned in relation to the context.
The context is the last parent that has position: relative / absolute / fixed. Right now the context is probably some higher level container or even the body itself, so all .text items are concentrated there.
It has to do with the position of the elements like other have pointed out
.text {
position: absolute;
z-index: 100;
color: black;
width: 100%;
top: 50px;
left: 50px;
}
.image {
padding: 2px;
position: relative;
}
.container {
float:left;
}
https://jsfiddle.net/xqf8kfd1/1/
Give 'container' class style as follows:
.container {
position: relative;
}
And remove float: left; from 'image' class
try removing the position:absolute and adding float:left to the css text class
.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;
}
I have three divs that I am trying to put on a single line. I want one to always snap left, and I want one to always snap right. The third one, which the display will be toggled using javascript, has to always be center. I've tried float. I've tried display:inline-block. Nothing works. Below is my code, any help would be greatly appreciated.
<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
<img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
<label>Change Control</label>
</div>
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
<label>User:</label>
<asp:Label ID="lblUser" runat="server"></asp:Label>
<asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>
You can use absolute positioning like this:
.container {
position: relative;
width: 100%;
height: 50px;
}
.first {
width: 100px;
height: inherit;
position: absolute;
left: 0;
background-color: #FAA;
}
.second {
width: auto;
height: inherit;
position: absolute;
top: 0;
margin-left: 100px; // 1st div width
margin-right: 200px; // 3rd div width
background-color: #AFA;
}
.third {
width: 200px;
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: #AAF;
}
And then use a <div class="container"> which has inside the 3 divs with classes first, second and third.
If you set the margins of the second equals to the with of the first and third, like in the sample, it will fill up all the space.
You can look at it working in this fiddle: http://jsfiddle.net/jbustos/Bq2rw/
Here's an example of one way to do it. The order of the divs in the HTML being left, right, center is important, since otherwise the right will place itself below the left and center elements. See it live at jsfiddle (with JS to hide/show the center). Here's the HTML:
<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>
And CSS:
.left, .center, .right {
background-color: red;
width: 100px;
}
.left {
float: left;
}
.center {
margin: auto;
}
.right {
float: right;
}
OK, I know that this is an old problem and there are some answers here on Stackoverflow, but none seems to contain a solution for my problem or I'm not fit to understand the answers provided.
I want to align content of one div on a page created with the help of Blueprint CSS horizontally and vertically centered as shown in the picture below and I can't figure out how. Most of the variations I tested use some sort of absolute positioning and all divs end up in the middle of the screen.
Try applying these styles to the div in which the text should be centered
.mydiv{
display: table-cell;
vertical-align: middle;
text-align: center;
}
I want to propose an alternative solution, using this CSS for the alignment:
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
It requires additional markup, as such:
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
Why would it be useful? Because display:table-cell and vertical-align: middle will not work in a div that has position:absolute which is something desirable when making columns and rows. Also, placing a div with the display-table & vertical-align combo inside a div that has absolute position will may be infructuous because you may not be able to make that inner div fill the whole outer div without knowing the size (which may depend on the viewport).
The complete code...
HTML:
<div class="left col">
<p>I want to be left aligned</p>
<p>Me too</p>
<p>More text</p>
</div>
<div class="right col">
<div class="top row">
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
</div>
<div class="bottom row">
<p>Just some more text...</p>
</div>
</div>
CSS:
.col {
top: 0;
bottom: 0;
}
.row {
left: 0;
right: 0;
}
.row, .col {
overflow: hidden;
position: absolute;
border: 1px solid black;
}
.left.col {
left: 0;
width: 250px;
}
.right.col {
left: 250px;
right: 0;
}
.top.row {
top: 0;
height: 100px;
}
.bottom.row {
top: 100px;
bottom: 0;
}
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
See at Codepen.
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>
This is what I'm trying to achieve
http://i.stack.imgur.com/e9xZa.jpg
I tried this
jsfiddle.net/RUSm3/
but as you can see the date overlaps on the image.
So I added left:215px for the date
jsfiddle.net/9aw29/
It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.
If you have a div like this
<div class="container">
<div class="date">today</div>
</div>
with this css fragment your date div will be positioned to the bottom right of it's container.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
You can verify it working here
I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>