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/
Related
I am learning to bear with me.
I want to have 3 separate blocks within a container, and through css have them inlined, for example
the html (rough idea)
<div class="content-container">
<div class="block1">
<img scr="blockimage1" />
</div>
<div class="block2">
<img scr="blockimage2" />
</div>
<div class="block3">
<img scr="blockimage3" />
</div>
</div>
the css (rough idea)
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block1
{
width:500px;
float:left;
}
.block2
{
width:500px;
float:center;
}
.block3
{
width:500px;
float:right;
}
What's happening to me is they are just all aligning vertically below each other. Not next to each other in a horizontal line. I've tried many things and the closest I got was making a grid system with bootstrap but I ran issues with that later on so I thought I'd try a new approach.
You need to clean your HTML, CSS and use a simple solution. View the result in full screen. Display the blocks in a line using display: inline-block
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block {
display: inline-block;
}
<div class="content-container">
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
</div>
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!!!
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
I've had page layout made via an Html table in my home page.
the lay out was fine , though i was reading that tables are not the way to go (SEO and maybe not only that)
so i need to use divs, the layout is as follows
(i am in RTL Lang /style /direction)
My Question is
Could anyone Try and simplify how to or give an example for a lay out like that
and in more detailed explained :
i think "my life" was so simple, when i had to understand the structure of a table
so, for illustration purpose take this markup:
<table>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>3</td> <td>4</td> </tr>
</table>
here you don't need to think much to analyze that this will be 2 by 2 table
but when it comes to divs i get no results laying them as i plan to
i would like to know how do i make that simple as it was with a table for me .
2 now that i am trying to achieve that layout via divs (no table involved )
and to make it work so that layout will be Cross Browser, meaning will look same
at least for the 3 main browsers IE8&9 / FF / Chrome (only my preference)
thanks in advance
I tried hard to make template like what you want.I hope you will like it.See my layout
by division tag.I am attaching a screen shot as well that is created on the base of
my div logic.I think it will be clear for you.
<div id="main" >
<div style="background-color:Blue; text-align:center; ">
Main banner
</div>
<div style="background-color:Green; text-align:center; " >
Top menu
</div>
<div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
Right side menu
</div>
<div style="background-color:Red; text-align:center; height:200px;" >
<div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
contend2
</div>
<div style="background-color:Lime; text-align:center;height:100px; ">
contend1
</div>
<div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
contend4
</div>
<div style="background-color:Orange; text-align:center;height:100px; ">
contend3
</div>
</div>
<div style="background-color:Silver; text-align:center; " >
Footer
</div>
</div>
**In case if you want external css then use**
<div id="main" >
<div id="mainbanner">
Main banner
</div>
<div id="topmenu" >
Top menu
</div>
<div id="rsm" >
Right side menu
</div>
<div id="maincontend" >
<div id="c2" >
contend2
</div>
<div id="c1">
contend1
</div>
<div id="c4">
contend4
</div>
<div id="c3">
contend3
</div>
</div>
<div id="footer">
Footer
</div>
</div>
**CSS................**
#Main
{
}
#mainbanner
{
background-color:Blue;
text-align:center;
}
#topmenu
{
background-color:Green;
text-align:center;
}
#rsm
{
background-color:Gray;
text-align:center;
width:300px;
float:right;
height:200px;
}
#maincontend
{
background-color:Red;
text-align:center;
height:200px;
}
#c2
{
background-color:Fuchsia;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c1
{
background-color:Lime;
text-align:center;
height:100px;
}
#c4
{
background-color:Aqua;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c3
{
background-color:Orange;
text-align:center;
height:100px;
}
#footer
{
background-color:Silver;
text-align:center;
}
You can't ask for complete layouts, but I wrote two tutorials that will definitely help you acquire the skill required to make them: How to Position in CSS and Create a Fixed ('Sticky') Footer with CSS.
Check this
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div>
<div id="navigation">
<p>This is the Menu</p>
</div>
<div id="leftcolumn">
<div class="row">
<div>1st block</div>
<div>2nd block</div>
</div>
<div class="row">
<div>3rd block</div>
<div>4th block</div>
</div>
</div>
<div id="rightcolumn">
sfsf
</div>
<div id="footer">
<p>This is the Footer</p>
</div>
</div>
DEMO
HTML-Cleaner has a nice feature to replace HTML tables with DIVs: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
Make sure you include the css code supplied.
This question already has answers here:
CSS: Vertical column layout without <table>
(3 answers)
Closed 9 years ago.
I have the below html code. What I need to do is split wuiInPageNav into two sections. LeftArea and wuiMainPageNav and they need to be side by side all the time. LeftAre div will hold my jstree nodes and wauiMainPageNave div will hold my charts and data etc. When I do the following, left goes left and wuiMainPageNav goes to the right. But when I resize the browser window, make it smaller, wuiMainPageNave goes down to the botttom. How do I make sure that LeftArea is always on the left and wuiMainPageName is always on the right, regardles of the browser window and size?missing here. Any ideas?
div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title">Applicaion</h3>
<div id=tree></div>
</div>
</div>
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="top_chart" class="center"> </div>
</div>
</div>
</div>
css:
#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; }
div#wuiLeftArea{
float: left;
width: 16.25em;
background-color: #f2f4f5;
padding-top: .5833em;
position: relative;
}
UPDATE
Make sure you don't do your CSS inline:
http://jsfiddle.net/FE79R/1/
HTML
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="left">
<div id="tree">tree</div>
</div>
<div id=main>
<div id="top_charts" class="center"> </div>
<div class="main1">
<div id="top_chart1" class="center">top chart 1</div>
<div id="top_chart2" class="center">top chart 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#wuiInpageNav { width:300px; overflow:hidden; }
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;}
#main { width:200px; float:left; background-color:orange;}