<style>
.alt{
width:auto;
height:50px;
text-align
background:#333;
border-top:2px solid #000;
box-shadow:0 0 10px #000;
position:absolute;
bottom:0;
left:0;
}
</style>
<div class="alt">
TEXT CONTENT
</div>
width:auto is not working correct i dont know why. it should be wide same as browser screen but it just wide as half of screen
Related
I have a div in which there is an image and text everything is working fine but when it is zoomed out the text gets longer and jumps out of the div currently i am using overflow-x:hidden; to hide it but why does this happen? This is my code http://jsfiddle.net/z19n1jjg/
<div id="test"><img src="http://placekitten.com/300/301"/>
<p>content</p>
</div>
CSS
#test{
border:1px solid black;
width:300px;
height:320px;
overflow-x:auto;
}
#test img{
float:left;
width:150px;
height:150px;
}
You are using pixels. They will change on different display sizes.
If you want to code relatively, use em's instead of pixels.
View updated fiddle: http://jsfiddle.net/z19n1jjg/1/
#test{
border:1px solid black;
width:18em;
height:22em;
padding:1em;
}
#test img{
float:left;
width:5em;
height:5em;
margin:0 .5em 0 .5em;
}
Is this what you were looking for?
I have a div containing only an image with a height of 400px. The div has no padding but it's height is 406px causing an ugly grey 6px horizontal stripe below its img.
The reason for the grey background is that comparable divs may contain a caption beneath their img.
What causes the extra 6px and how can I get rid of it?
P.s. I'm aware the HTML markup is not semantic/HTML5 but I'd rather not change it.
The basic markup is
<body>
<div>
<div class='img w960'>
<img src='timg-960-480.png' alt=''>
</div>
</div>
</body>
The CSS for this example is
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
Set line-height: 0 on your div.img. This will affect the image caption h3 but you can correct that with an extra CSS line. The image is set inline and sits on the text baseline.
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
line-height: 0;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
I always solve this problem by setting the image's display property to block (display: block;).
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 have a CSS two column layout which is fixed and centered. On pages where the navigation is long and the content is short, the footer is not repositioning to below the navigation - it remains at the min-height of the content area and the navigation falls behind the footer.
I have included everything in the fiddle for you to see: http://jsfiddle.net/fmJqw/1/
But essentially, i have the following structure:
<div id="wrapper">
<div id="headerWrapper"></div>
<div id="bcrumbwrapper"></div>
<div id="midWrapper">
<div id="navWrapper"></div>
<div id="contentWrapper"></div>
</div>
<div class="clear"></div>
<div id="footerWrapper"></div>
</div>
The CSS is as follows:
#wrapper{
padding:0px;
margin:0 auto;
width:1000px;
min-height:768px;
}
/*Header styles*/
#headerWrapper{
padding:0px 0px 0px 0px;
margin:0px;
width:1000px;
height:175px;
position:relative;
}
#bcrumbWrapper{
padding:0px 0px 0px 20px;
margin:0px;
width:980px;
min-height:24px;
position:relative;
}
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
min-height:513px;
position:absolute;
top:0;
bottom:0;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
float:left;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
#footerWrapper{
padding:5px 0px 0px 0px;
margin:0px;
width:1000px;
height:40px;
position:relative;
}
Because I was trying to float both items to the left, but using absolute positioning for one of the divs, things were competing. I removed the float on the content wrapper and removed absolute positioning on the navigation wrapper. I then changed the background colour of the containing div to ensure that it appeared as if the navwrapper ran the length of the page.
So it became:
#midWrapper{
padding:0px;
margin:0px;
width:1000px;
height:auto;
position:relative;
background-colour: #EBE2CA;
}
#navWrapper{
padding:20px 0px 0px 20px;
margin:0px;
float:left;
width:200px;
}
#contentWrapper{
padding:15px;
margin: 0px 0px 0px 220px;
width:750px;
min-height:503px;
position:relative;
background-color: #FFFFFF;
}
No changes to the HTML and no JavaScript needed!
You could always dynamically change min-height with a bit a javascipt, based on the height of the div that holds the content, which I think is #contentWrapper.
You could check CSS Sticky footer out: http://www.cssstickyfooter.com/ but it would take a bit of fiddling to get it to work due to the nature of your markup.
Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}