I have some divs floating inside another one and I want to align them to the bottom.
This is the HTML:
<div class="magazinebookcase">
<div class="books">
<a title="Mag1" style="height:286px;width:16px;" href="">
</a>
</div>
<div class="books">
<a title="Mag2" style="height:258px;width:48px;" href="">
</a>
</div>
<div class="books">
<a title="Mag3" style="height:252px;width:38px;" href="">
</a>
</div>
<div class="books">
<a title="Mag4" style="height:258px;width:50px;" href="">
</a>
</div>
<div class="books">
<a title="Mag5" style="height:284px;width:14px;" href="">
</a>
</div>
<div class="clearfix"></div>
</div>
And the CSS:
.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;
}
.magazinebookcase .clearfix {
clear:both;
}
.magazinebookcase .books {
text-align:center;
float:left;
position: relative;
vertical-align:bottom;
}
.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}
.magazinebookcase a:hover {
background-color: #ccc;
}
I've tried many ways, changing the positions from absolutes to relatives and other things but I can't do it properly. Any help?
You should not use tables for your layout. But the vertical alignment features are very powerful. You could do something like that:
display: table-cell;
vertical-align: bottom;
I made a jsFiddle that demonstrates how it works.
CSS should be like this:
.left {
display:block;
position:relative;
height:200px;
float:left;
}
.bottom {
position:absolute;
bottom:0;
}
.clear {
clear:both;
}
HTML
<div class="left">
<div class="bottom"></div>
</div>
<div class="left">
</div>
<div class="clear"></div>
Use tables instead. It's my recommendation. On each td use valign:bottom.
Related
I'm trying to make clickable image inside div and it's being placed under divs header. I want that this image would be in the same level as Header.
Thanks.
Html:
<div class="One"> <h1> One </h1>
<div <a href="One.html">
<img alt="One" src="One.jpg" width="200" height="200"> </a></div>
</div>
Css:
.One{
position:absolute;
top:10%;
left:10%;
height: 35%;
width: 50%;
border: 1px solid;
}
.One h1{
text-align: center;
}
You forgot to close one of the opening div tags.You also may need to use the whole URL in the hyperlink. Instead of using
<a href="One.html">
You might want to use
<a href="http://mywebsite.com/One.html">
Are you expecting the following output?
.One{
position:absolute;
top:10%;
left:10%;
height: 35%;
width: 50%;
border: 1px solid;
}
.One h1{
position:absolute;
left:35%;
}
.One a img {
width:100%;
height:100%;
}
<div class="One"> <h1> One </h1>
<a href="One.html">
<img alt="One" src="https://image.freepik.com/free-vector/prairie-house-with-fowers-and-sunrays-background_293-152.jpg" > </a></div>
I create a popup via javascript, below is the rendered html. I would like to have a headingrow containing the heading("Preisrechner") and both of the icons you see below. I can't really adjust them so that they are in one row. What should I do to get one row with heading and icons?
FIDDLE
<div style="display: table; top: 51px; right: 0px;" id="quickrechner" class="popup-wrapper">
<div class="my-popup-box">
<div class="my-popup-heading"><h5>Preisrechner</h5>
<div class="headingIcons">
<ul>
<li><i class="ion-ios-navigate-outline"></i></li>
<li><i class="ion-ios-close-empty"></i></li>
</ul>
</div>
</div>
<div class="my-popup-content">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="col-md-4"><label for="e">EK - Preis:</label></div>
<div class="col-md-8"><input class="buyIn" id="e" type="text"></div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-4"><label for="d">EK - Preis:</label></div>
<div class="col-md-8"><input class="buyIn" id="d" type="text"></div>
</div>
</div>
</div>
</div>
</div>
</div>
.popup-wrapper{
display:none;
position:absolute;
top:51px;
background:#bdbdbd;
z-index:10
}
.my-popup-box{
display:table-cell;
line-height:18px
}
.my-popup-heading{
width:100%;
padding-left:5px;
float:left;
}
.my-popup-heading i{
font-size:1.1em;
font-weight:700;
margin:0 8px;
position: relative;
float:right;
}
.my-popup-heading .heading-icons{
position:absolute;
right:10px
}
.my-popup-content{
margin-left:auto;
margin-right:auto;
width:100%;
padding:9px
}
DESIRED RESULT:
You seem to be using bootstrap, so one solution would be this:
<div class="my-popup-heading"><h5 class="pull-left">Preisrechner</h5>
<div class="headingIcons">
<ul class="list-inline pull-right">
<li><i class="ion-ios-navigate-outline"></i></li>
<li><i class="ion-ios-close-empty"></i></li>
</ul>
</div>
</div>
In basic you can give the icons and the heading different floats to achieve you desired outcome. .pull-right and .pull-left are the bootstrap classes to give floats.
Updated Fiddle
I created a JSfiddle with the simple changes you desired.
Here are the critical CSS changes:
.my-popup-heading h5{
display: inline-block;
width: 45%;
float: left;
}
.headingIcons ul li{
display: inline;
}
.my-popup-heading .heading-icons{
display: inline-block;
float:right;
width:45%;
}
In order to have block level elements (<h5>, <ul>) on the same line, you have to use a display type such as inline or inline-block. And to have <li> on the same line, you have to use display:inline.
If I misunderstood, comment below.
Try it with:
ul {
float: right;
}
h5 {
float: left;
}
You should wrap them of course. Otherwise they will apply to all h5 and ul tags...
I am having difficulties in understanding the nature of table and table-cell when used in css.
Consider the following: http://jsfiddle.net/dd7h7/3/.
HTML
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
CSS
.widget {
display:block;
margin:0px;
padding:0px;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
}
.content {
display:table;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-spacing:0;
border-collapse:collapse;
}
.icon {
display:table-cell;
width:15px;
height:15px;
margin:0px;
padding:0px;
vertical-align:middle;
text-align:center;
}
.label {
display:table-cell;
margin:0px;
padding:0px;
padding-left:3px;
vertical-align:middle;
}
Im trying to make a widget containing some buttons, that are positioned alongside each other. But I don't understand where the space between the red boxes comes from. How do I get rid of it?
Thanks
Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:
Removing the space between the elements
Using HTML comments (<!-- -->) to occupy the gap
Floating the elements left
Example of removing the white space between elements:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using HTML comments:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using float:
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float:left;
}
jsFiddle example
So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.
in this fiddle i removed the space simply using
float:left;
http://jsfiddle.net/dd7h7/5/
inline-block is adding that unnecessary space.
You can do a little trick with font size:
.widget {
display:block;
margin:0px;
padding:0px;
font-size: 0;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
font-size: initial;
}
I think you should add
float:left
to
.button
so CSS should be like this
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float: left;
}
Hope, that will help. :)
I used the following code for simple image gallery (actual code found in http://w3schools.com, it works perfectly). After editing css the alignment of text has been changed. I want to align the text at centre. Anybody knows the answer please help me.
My HTML Code:
<html>
<body>
<div id="d">
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here </div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</p>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</P>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
</div>
</body>
</html>
My CSS Code:
#d
{
width : 660;
border:1px;
}
.img
{
margin:3px;
border:1px solid #0000ff;
height:200;
width:200;
float:left;
text-align:center;
}
.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width:100;
height : auto;
}
.img a:hover img
{
border:2px solid #0000ff;
}
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
Screenshot:
Remove the width of the div.
.desc {
text-align: center;
font-weight: normal;
margin: 2px;
}
And also change it to text-align. The attribute align does not exist.
Try this:
.desc{
margin: 0 auto;
}
you have to modify the value of the margin property:
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px auto;
}
also the hash sign is missing in this part:
<style>
d
{
width : 660;
border:1px;
}
it has to be modified like this:
<style>
#d {
width : 660;
border:1px;
}
Change css to
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
change align:center; to text-align:center;
.detail
{
text-align: center;
font-weight: normal;
margin: 0 auto;
}
#container {
background-color: #CCC;
height:100px;
}
.clear-fix
{
overflow: hidden;
_height:1%;
}
#navigation {
float: right;
margin-right: 10px;
background-color:Aqua;
}
#content {
float: left;
margin-left: 10px;
background-color:Orange;
}
#content div{display:inline; float:right;}
#content a {float:right; display:inline;margin-right:5px;}
<body style="direction:rtl">
<div id="container" class="clear-fix">
<div id="navigation">hi there ddd ddd</div>
<div id="content">
<div>somthing else</div>
<a target="_blank" href="#" ><img src="anything.jpg" style="width:32px; height:32px"/></a>
<a target="_blank" href="#" ><img src="anything.jpg" style="width:32px; height:32px" /></a>
</div>
</div>
</body>
IE6/7 not show correctly (left-side). i don't want set width for #content do you know any fixer for IE?
if i float inner element of content to left, it is correct (after re arrange of element),
but i want float element to right.
please tell me your solution.
best regards
Not so sure, but from the top of my head... try this
You can add these and see
#container{
width:[your width];
}
#content{
display: inline-block;
}