I have a big problem with my div containers.
I have a container that the text is located in and it has dynamic height and there's a container with an icon that is supposed to adjust the height of the text. But the Container with the icon has a fixed height.
Here the link to Fiddle:
FIDDLE
You could use display:table; and display:table-cell; display attributes to get what you wanted.
CSS:
.div-table {
display:table;
width:100%;
border:3px solid #333;
}
.div-table .div-table-cell {
display:table-cell;
vertical-align:middle;
}
.div-table .text-cell {
width:80%;
padding:10px 20px;
}
.div-table .icon-cell {
width:20%;
background:#999;
color:#fff;
font-size:4em;
text-align:center;
}
Fiddle Link: http://jsfiddle.net/ravimallya/uNV8G/2/
Related
I have 2 divs inside a container like this:
<div id="container">
<div id="first">Hello World</div>
<div id="second">I want to be at the top</div>
</div>
I want to align the first div below the second div without changing the HTML. How is this possible?
Here is my CSS:
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
height:200px;
}
#second {
float:left;
height:200px;
width:100%;
}
I am aware I can set position:fixed to #second and align it to the top but is there any other way to achieve this?
Here is a jsFiddle.
The height of the divs are depending on the content inside. The fixed height above is only for testing.
If you know the heights of the div's, you can use margin-top to solve this problem.
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
background:lightblue;
height:200px;
margin-top: 200px;
}
#second {
float:left;
height:200px;
width:100%;
background:yellow;
margin-top: -400px;
}
If you do not know the heights, you can use flexbox with the order property.
#container {
display: flex;
float:left;
width:100%;
flex-direction: column;
}
#first {
order: 2;
float:left;
width:100%;
background:lightblue;
}
#second {
order: 1;
float:left;
width:100%;
background:yellow;
}
As lyjackal mentioned in another answer, you can also use column-reverse instead of column, which reverses the elements. Choose what suits you the best.
you can use flex-box and reverse the column
#container {
float:left;
width:100%;
display:flex;
flex-direction: column-reverse;
}
fiddle
all can, but this is fixed height so modify you css
#container {
float:left;
width:100%;
}
#first {
float:left;
width:100%;
height:200px;
margin-top:200px;
}
#second {
float:left;
height:200px;
width:100%;
margin-top:-400px;
}
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I'm having some trouble styling my news articles. This is preview of what I'd like to have:
On the left you always have an image (width is always the same, height isn't). On the right you have some information and a button on bottom aligned with the image.
<div id="newsItemImage">
<img src="" alt="" />
</div>
<div id="newsItemOther">
<p></p>
<button></button>
</div>
Float left on both of the divs. But the height of the two div's isn't the same. How can I make them equal?
This is what I have now:
.newsItemPic
{
width:333px;
border:1px solid black;
float:left;
height:100%;
}
.newsItemOther{
width:860px;
border:1px solid red;
float:left;
height:100%;
}
They are next to each other but the right content is not the same height as the image. So the image that's supposed to be under comes up under the content.
JSFIDDLE: http://jsfiddle.net/ZhD9Z/
Fiddle
as image is not responsive and it has 200px absolute width, i created one container width:500px;
then righttext must contain button itself but button must be aligned width image bottom, so righttext height equals with image height and button positioned at bottom:0
.eachNewsBox
{
padding:10px;
width:500px;
background-color:gray;
display:block;
float:left;
margin-top:20px;
}
.imgbox
{
display:block;
float:left;
height:100%;
position: relative;
}
.imgbox img
{
max-width:200px;
border:1px solid #000;
float: left;
}
.button
{
width:100px;
height:20px;
line-height:20px;
background-color:#FFF;
text-align:center;
margin-bottom:0px;
color:#000;
position:absolute;
bottom:0;
}
.rightText
{
float:right;
font-size:10px;
max-width:242px;
padding-left:10px;
color:#FFF;
height: 100%;
left:210px;
}
i am using this css:
body,html {
font-family:Arial;
margin:0;
padding:0;
width:100%;
height:100%;
background:#0C3;
}
.header {
min-height:80px;
width:100%;
margin:0 auto 0 auto;
border:1px solid black;
}
.container {
width:960px;
}
.logo {
float:left;
display:inline;
}
.menu {
width:300px;
float:right;
display:inline;
}
to display a header the width ofmy container div (960px) with a logo to the left of the header and menu to the right
here is a fiddle: http://jsfiddle.net/YxeTf/
but the header div is not displaying centre
Just add margin:auto; to .container to center a block element within its parent <div>.
Demo
.container {
width:960px;
margin:auto;
}
Give your header specific width - less than 960px
DEMO jsfiddle
try this code for header ---
.header {
min-height:80px;
width:700px;
margin:0px auto;
border:1px solid black;
}
I am trying to keep #chat-inner div in the middle of the #chat-main div, well I can do that by using percentage values but my problem is that there should be 2px gap (with respect to both width and height) which a percentage value cant provide. For clear understanding please see the comment in CSS code.
JSbin
HTML
<div id="chat-outline">
<div id="chat-main">
<div id="chat-inner">
</div>
</div>
</div>
CSS
#chat-outline
{background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
}
#chat-inner
{
width:95%;
height:97%;
/*How can I give pixels here? I need 2px value*/
margin:2.5% 2.5% 2.5% 2.5%;
/*margin:2px;*/
background-color:cornflowerblue;
}
Try something like this (demo):
#chat-outline
{ background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
position:relative;
}
#chat-inner
{
top:2px;
bottom:2px;
right:2px;
left:2px;
background-color:cornflowerblue;
position:absolute;
}
you can achieve your desired results through padding also :-
#chat-outline
{background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
padding:2px;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#chat-inner
{
width:100%;
height:100%;
background-color:cornflowerblue;
}
DEMO