I have the following where I want the right div to align to the top of the parent, but it's just not happening for me..
<div id="container">
<div id="center">Center</div>
<div id="left">Left text here...</div>
<div id="right"><img src="image.png" width="75" height="75" /></div>
</div>
CSS
#container{
width:50%;
overflow:auto;
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
vertical-align: top;
}
#left{
width:100px;
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
}
#right{
float:right;
width:100px;
text-align:right;
vertical-align: top;
border-style:solid;
height:100px;
width:100px;
border-width:1px;
border-color:#aaaaaa;
}
#center{
float:left;
padding-bottom: 10px;
width:100px;
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
}
Fiddle at http://jsfiddle.net/w3Gcb/
If you swap the left div with the right one, then the right div goes to top:
Fiddle
<div id="container">
<div id="right"><img src="image.png" width="57" height="57" /></div>
<div id="center">Centre</div>
<div id="left">Left text here...</div>
</div>
In Css
#right{
float:right;
width:100px;
text-align:right;
vertical-align: top;
border-style:solid;
height:100px;
width:100%;
border-width:1px;
border-color:#aaaaaa;
}
Try this...
Add one more div like this code:
<div id="container">
<div class="mid">
<div id="center">Centre</div>
<div id="left">Left text here...</div>
</div>
<div id="right"><img src="image.png" width="57" height="57" /></div>
</div>
and give the CSS to mid class as following:
.mid{
float:left;
}
This will work properly.
Related
I try to position a table-cell always at the bottom within a display:table,
but with no success.
Maybe someone can show me what is wrong with my CSS.
codepen
HTML
<div class="table">
<div class="cell">
<div class="top">Top</div>
<div class="middle">Text in the<br>middle cell<br>with a variable <br>number of rows</div>
<div class="bottom">Button always at the bottom</div>
</div>
<div class="cell">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Button always at the bottom</div>
</div>
</div>
CSS
.table {
background-color:#BBB;
border-collapse:separate;
border-spacing:10px;
display:table;
width:500px;
}
.cell {
background-color:#EEE;
display:table-cell;
padding:5px;
width:200px;
}
.top {
height:20px;
}
.middle {
min-height:60px;
padding:15px;
}
.bottom {
min-height:30px;
vertical-align:bottom;
}
If you can afford to give your .bottom a fixed height, potentially you could absolutely position them to within the container and then give .middle some matching margin or padding?
All you have to do is to add position:relative; to "cell" class, and position:absolute; bottom:5px; to "bottom" class. The button will be absolute positioned in your "cell" div, which is relative positioned to the browser.
https://codepen.io/DannaB67/pen/NvxELm?editors=1100
HTML
<div class="table">
<div class="cell">
<div class="top">Top</div>
<div class="middle">
Text in the<br>middle cell<br>with a variable <br>number of rows</div>
<div class="bottom">Button always at the bottom</div>
</div>
<div class="cell">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Button always at the bottom</div>
</div>
</div>
CSS
.table {
background-color:#BBB;
border-collapse:separate;
border-spacing:10px;
display:table;
width:500px;
}
.cell {
background-color:#EEE;
display:table-cell;
position:relative;
padding:5px;
width:200px;
}
.top {
height:20px;
}
.middle {
min-height:100px;
padding:15px;
}
.bottom {
min-height:30px;
position:absolute;
bottom:0px;
right:5px;
}
I'm trying to create something that will allow me to put something on top of images in this case, small images.
basically, it goes like this and both main divs are centered:
http://jsmith.elementfx.com/images/questions.png
tia.
Sorry, here is
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="rightimage"><h2>434</h2></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
}
#right {
margin-right:15px;
}
#rightimage{
position:absolute;
padding-top:2px;
width:65px;
}
you have to use z-index and position to acheive it,
DEMO
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><div id="rightimage"><h2>434</h2></div><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
z-index:1;
}
#right {
position:relative;
margin-right:15px;
}
#rightimage{
margin-left:175px;
position:absolute;
z-index:1000;
}
use this code, the calculation of the width and height of images would be according to your images:
HTML
<div class="container">
<div class="img1">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
<div class="img2">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
</div>
CSS
.container{
width:270px;
margin:0 auto;
overflow:hidden;
}
.img1,.img2{
width:128px;
height:128px;
background:url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png);
float:left;
margin-right:10px;
border:1px solid #000;
}
.img2{margin:0;}
DEMO jsfiddle for this
Demo Fiddle - Quad view with 3 layered images
<div class="container start">
<img src="http://www.placehold.it/300/555555"></img>
<div id="base1" class="base">
<img src="http://www.placehold.it/200/654321"></img>
<div id="overlay1" class="overlay">
<img src="http://www.placehold.it/100/123456"></img>
</div>
</div>
</div>
.base {
width: 200px;
height: 200px;
position: relative;
top: -290px;
left: 10px;
}
.overlay {
width:100px;
height:100px;
position: relative;
left: 10px;
top: -190px;
}
.container {
left:100px;
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
.start {
clear: left;
}
I'm trying to get the pictures to get ".other-wrap" to vertically align with the picture on the left. I've tried adding a margin or a border but for some reason this pushes ".other-wrap" down and further out of alignment. Can anyone explain what's causing this behavior and what css I can add to ".other-wrap" to get it to align without changing the html structure.
fiddle
Html:
<div id="588970897807405-list" class="main">
<div id="588970897807405" class="main-wrap">
<div class="inner-wrap">
<div class="inner-name-wrap" style="font-size: 10pt;">
<div class="inner-name">header</div>
</div>
<div class="inner-img-wrap">
<img id="588970897807405-event-img" class="inner-img" src="http://nodogaboutit.files.wordpress.com/2012/10/j04310181.jpg">
</div>
<div class="formatted-footer-wrap" style="font-size: 10pt;">
<div class="footer">footer</div>
</div>
</div>
<div class="other-wrap">
<div class="other-inner">
<div class="other-img-wrap"><img class="other-img" width="120" height="120" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"></div>
</div>
</div>
</div>
CSS:
.main .inner-img{
vertical-align:middle;
margin:auto;
display:block;
width:120px;
height:120px;
top:0px;
}
.other-wrap{
/*border:solid black 15px;*/
margin:15px;
}
.main .inner-name-wrap{
white-space:nowrap;
width:150px;
font-size:14px;
text-overflow:ellipsis;
font-weight:normal;
display:block;
color:white;
background:black;
}
.main .formatted-footer-wrap{
color:white;
display:block;
font-size:10px;
width:150px;
background:black;
}
.main .other-wrap{
display:inline-block;
font-size:12px;
}
.main .formatted-time-wrap{
display:none;
font-size:10px;
}
.inner-wrap{
display:inline-block;
border:solid hsl(0, 100%, 100%) 1px;
}
It seems you need vertical-align.
Try vertical-align: middle:
.main-wrap{
font-size: 0; /* To fix extra space due to whitespaces in HTML */
}
.other-wrap, .inner-wrap{
display:inline-block;
vertical-align: middle;
margin: 15px;
}
Demo
I have this code:
<div class="thumbnail">
<div class="image_thumbnail">
<div class="category"></div>
<div class="category2"></div>
</div>
<div class="info_thumbnail"></div>
<div class="footer_thumbnail">
<div class="stars_empty"></div>
<img class="views" src="images/views.png">10
</div>
</div>
How do I have to work on css to have an effect like this?
The green div should be the category div
Thanks!
<div id="container">
<div class="box"></div>
<div class="tab"></div>
</div>
#container{
position:relative;
}
.box{
position:relative;
left:10px;
top:10px;
height:150px;
width:100px;
border-radius:8px;
border:2px solid #666;
background-color:#DDD;
z-index:5;
}
.tab {
position:absolute;
left:105px;
top:35px;
width:25px;
height:40px;
background-color:green;
border-radius:5px;
box-shadow: 3px 3px 3px #888;
}
Demo: http://jsfiddle.net/Q7RkR/
What you'd like to do is not much clear.
Anyway, to handle over-positions you should have a main container for each of your thumbnail; set position:relative to the main container, and set position:absolute to each child layer element.
<style>
body{
color:red;
}
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
}
.header{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.fotter{
width:900px;
height:150px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Fotter Content</div>
</div>
You forgot to clear your floats.
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Fotter Content</div>
<br style="clear: both;" /> <!-- Google "clear floats" for a few different ways to clear your floats. -->
</div>
This is his problem, and this is his solution.
P.S. It's spelled footer :)