Below is my code :
<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div
CSS:
#footer {
width:500px;
position:relative
}
#left_footer{
float:left;
}
#right_footer{
float:right;
}
I am trying this code but my image is not aligned to center its always aligned to left in left footer and to right in right footer. Please suggest !
I would approach the layout like this:
http://jsfiddle.net/yWmZ5/1/
HTML
<div id="footer">
<div id="left_footer">
<img src="http://placekitten.com/100/100" />
</div>
<div id="right_footer">
<img src="http://placekitten.com/100/100" />
</div>
</div>
CSS
#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }
Make sure you strip all styling (eg - align, etc) out of your HTML and put it in your CSS.
Try this style:
#footer > div{width:50%}
your div#left_footer and div#right_footer need to have some width, in order to display the content in the middle
change your corresponding css to this:
#left_footer{
text-align:center;
float:left;
width:50%;
}
#right_footer{
float:right;
width:50%;
}
see this fiddle
Related
This question already has answers here:
Why is there a gap between my image and its containing box?
(6 answers)
Closed 7 years ago.
A simple question and probably a simple solution, but I can't seem to find it.
As you can see in the example there is a pixel gap between the bottom of the 2 images and the DIV (home-top or home-bottom).
How do I get rid of that?
.container{
width:80%;
}
.menu{
width:100%;
background:black;
color:white;
text-align:center;
}
.home-top{
background:white;
overflow:hidden;
}
.home-bottom{
background:#EEE;
overflow:hidden;
}
.footer{
width:100%;
background:black;
color:white;
}
.txt-left, .img-left{
width:50%;
float:left;
}
.txt-right, .img-right{
width:50%;
float:left;
}
<div class="menu">
menu
</div>
<div class="home-top">
<div class="container">
<h1>home top</h1>
<div class="txt-left">
some text goes here.
</div>
<div class="img-right">
<img src="http://www.webtify.be/elkegeraerts/img/elke_geraerts.png" alt="" width="200" />
</div>
<div class="clear"></div>
</div>
</div>
<div class="home-bottom">
<div class="container">
<h1>home bottom</h1>
<div class="img-left">
<img src="http://www.webtify.be/elkegeraerts/img/boek.png" alt="" width="200" />
</div>
<div class="text-right">
some text goes here.
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
footer
</div>
Set "display:block;" on the images.
img{
display:block;
}
https://jsfiddle.net/
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I'm trying to make something like this. Any help will be greatly appreciated.
(can't paste the image due to 2 missing points of reputation ;) ) http://i.stack.imgur.com/p7xhr.jpg
I'm sorry I've given an impression like I don't know what I'm doing at all and I want someone else to do my work for me. I did try various solutions none of which seems to work.
on jfsfiddle it seems to work, but when I check on the actual site the top right image gets moved to another row
http://jsfiddle.net/37GAn/1/
html
<div>
<div class="image">
<img src="image.jpg" width="98" height="203"/>
</div>
<div class="image">
<img src="image.jpg" width="85" height="203"/>
</div>
<div class="clear"></div>
</div>
<div>
<div class="image">
<img src="image.jpg" width="130" height="210"/>
</div>
<div class="image">
<img src="image.jpg" width="69" height="197"/>
</div>
<div class="clear"></div>
</div>
css
.image {
float: left;
width: 100px;
margin-top:50px;
margin-left:280px;
}
This is just to give you a round-about idea.
You'll need your HTML as such:
<div id="contentHolder">
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
</div>
and CSS as such:
* {
margin:0;
padding:0;
}
#contentHolder {
background-color:Gray;
height:100%;
padding:40px 10px;
}
.row {
height:250px;
width:100%;
margin-bottom:30px;
}
.row > div {
display:inline-block;
width:48%;
height:inherit;
vertical-align:top;
}
.image {
background:white url(http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png) no-repeat 0px 0px scroll;
height:160px;
width:70%;
margin:20px auto;
border-radius:10px;
}
.textHolder {
color:White;
width:50%;
height:20px;
margin:0 auto;
}
This should work for you. This may still need some work as I have not tried to make it inch-perfect. That I'll leave it to you!!! :)
You can see that here:http://jsfiddle.net/a7zLW/
Hope this helps!!!
I only need one column on my index page and I want it to be on the right side of the screen. I am using a background image that has what I want on the left. bg-image is in the body
I am trying this approach but it is not getting all the way to the right. Am I going about this wrong and more generally how do you position one column to the right of the screen?
<div style=" float:right" >
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
css for the four inner divs
body{
background-image: url(images/splashpage.jpg);
background-position:top;
font-family: Arial, Helvetica, sans-serif;
}
.one{
<!-- width:40%; -->
background-color:lightblue;
font-family: Arial, Helvetica, sans-serif;
position:relative;
<!-- left:150px; -->
}
.two{
width:580px;
background-color:lightgreen;
position:relative;
right:100px;
top:50px;
}
.three{
width:600px;
background-color:blue;
position:relative;
right:100px;
}
.four{
width:580px;
position:relative;
left:20px;
margin: 0 auto;
top:50px;
}
.footer{
width:580px;
text-align:center;
position:relative;
top:50px;
this was working fine for the containing div to float right, but all this was doing was putting the inner divs side by side and I need them to stack.
<div style=" float:right" class="container" >
<div class="one" style="float:right"></div>
<div class="two" style="float:right"></div>
<div class="three" style="float:right"></div>
<div class="four" style="float:right"></div>
</div>
so I put a clear div in between each and now the container div floats right as well as the inner divs while stacking. It seems simple now but maybe if someone else has this problem this will help.
<div style=" float:right" class="container" >
<div class="one" style="float:right"></div>
<div style="clear:both"></div>
<div class="two" style="float:right"></div>
<div style="clear:both"></div>
<div class="three" style="float:right"></div>
<div style="clear:both"></div>
<div class="four" style="float:right"></div>
</div>
not sure if its best practice or if there's a more efficient way but it works.
I have 1 div wrapping h2 and image wrapped in div with class img. h2 is float:left and img float:right.
img div has image inside. What I want is
if image is height and width 100px than its not vertical-align:middle. Help please.
Tested with vertical-align:middle
CSS
.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}
HTML
<div class="mainbox-area">
<!-- Box start v1 -->
<div class="ver-mainbox">
<h2>Immunizations</h2>
<div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
</div>
<!-- Box start v1 -->
</div>
vertical-align is only applicable to table cells. You'll need to rethink how you go about this or use the display:table-* properties.
<div style="display:table">
<h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
<div style="display:table-cell;vertical-align:middle">
<img src="../../Content/images/v1.gif" alt="" title="" />
</div>
</div>