I need to edit these icon kind of menu.
I need them centered on the page, and also look good on mobile.
Here is my sample code:
<div style="margin-left: 0 auto;">
<div style="margin:0 auto;"> <img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</div>
</div>
and here is the fiddle: https://jsfiddle.net/yjwo2eqa/
Can someone help me?
Thanks
Giving text-align: center; to the top most div fixes it:
<div style="margin-left: 0 auto; text-align: center;">
Preview
Fiddle: https://jsfiddle.net/h3ckLfx1/
<div style="text-align:center">
<div style="margin:0 auto;"> <img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Blog-Icon.png" alt="tartisma-blog" width="128" height="128" /><br />Tartışma <br />Blog</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Gift-Icon.png" alt="hediyeler-kaynaklar" width="128" height="128" /><br />Hediyeler <br />ve Kaynaklar</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Chapel-Icon.png" alt="kilise-bul" width="128" height="128" /><br />Kilise <br />Adresleri</div>
<div style="margin:0 auto;"><img class="alignnone size-full wp-image-107" src="http://kutsalkitap.org/wp-content/uploads/2015/07/Bible-Icon.png" alt="online-kutsal-kitap" width="128" height="128"/><br />Online <br />Kutsal Kitap</div>
</div>
margin-left is not required just add text-align:center
Related
so i have a table and i want the buttons side by side instead of stacked
Css or HTML is fine but not js sorry if the question isnt very clear im still new to this :/
i tried
display: flex;
align-items: center;
justify-content: center;
but that just does this
ive included the CSS and html code snippett bellow thanks to everyone who can help i kept the alts instead of the actual image because this is for my photography website
#charset "UTF-8";
button{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;
}
button:hover{
color:#DDDDDD;
border-color:#DDDDDD;
}
button:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
#media all and (max-width:30em){
button{
display:block;
margin:0.4em auto;
}
}
<div style="text-align:center">
<button id="wildlife">EG </button><br>
<button id="landscape">EG </button><br>
<button id="ocean">EG </button>
</div>
<div class="wildlife">
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<font face="sans-serif" color="#017bf5" size="5" align="center">
<h1>### </h1>
</font>
<font face="sans-serif" color="#444" size="3" align="center">
<h1>###</h1>
</font>
</body>
In Your HTML Code, you used <br> tag after each button. Which pushes your button to the next line.
Solution: Remove <br> tags after button elements.
A div box around the buttons with display: flex; and flex-direction: row; Should work
I make some block with image and i want put their in one line inside each other and have some space between them .
I expect this to be horizontal and less inner space.
I want to removing space between blocks.
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-md-1>div {background-color:#ddd;}
<div class="container-fluid">
<div class="row no-gutter" >
<div class="col-md-6" style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">i expect this to be horizontal and less inner space.placing it above head in wordpress theme just after head
</div>
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2940" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2947" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2946" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2945" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2944" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2942" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
</div>
</div>
I'm not sure that I understood your problem, but maybe you just need to wrap your divs with the facebook logo in an another div, and add a display:flex;
Check this example and let me know if it answer your question :)
https://codepen.io/mdubus/pen/NeQOKe
First of all I'm new and I need a little help to fix this basic HTML code ,
the code is :
<head>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left { width: 5px; float: left;
border-right: 8px solid #444 }
#right { margin-left: 500px;
border-left: 8px solid #0b9cef }
/*]]>*/
</style>
</head>
<body>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20" /> <big>Variety of Payment Methods</big>
</p>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20" /> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
</html>
I want to 2nd column in the same position as the 1st column is in.
+
I want some space between the blue separator / divider & 2nd column
Can anyone help me to fix this or Can anyone teach me how to do this ?
as I said I'm new so looking forward for some guidance !
First of all you are not using the styling rule #left that has float:left anywhwere. So no floating is happening to the p elements.
Then you are wrapping your second column with a <div id="right"> and the #right styling ruke has no float in it. Thats why the <p> elements are displaying as blocks and not aligning next to each other. Maybe wrap the first column with <div id="left"> and use the following for your #left css rule :
#left {
float: left;
border-right: 8px solid #444;
padding-right: 25px // added some padding distance between the content and right border
}
Second point, for
I want some space between the blue separator / divider & 2nd column
you can use padding (refer to this article to see the difference between padding and margin : Margin vs Padding.
Here's your updated code to provide what you need (note that I added 25px padding ditance beween the blue border and the content, and 25px distance between the left colulmn and the right one.)
<head>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left {
float: left;
border-right: 8px solid #444;
padding-right: 25px
}
#right {
border-left: 8px solid #0b9cef;
float: left;
padding-left: 25px;
margin-left: 25px;
}
/*]]>*/
</style>
</head>
<body>
<div id="left">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20"
height="20"/> <big>Variety of Payment Methods</big>
</p>
</div>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src=
"https://i.postimg.cc/SNJHq645/1398913.png" alt="" width=
"20" height="20"/> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
To adjust that blue line on the left you will need to add padding to the left ( I made it 10px but you can adjust it)
And set the width of the left to look good for you.
Here is the code
<body>
<title>
Shared column border
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
#left {
width: 300px;
float: left;
border-right: 8px solid #444 }
#right {
margin-left: 500px;
border-left: 8px solid #0b9cef;
padding-left: 10px;
}
/*]]>*/
</style>
<div id="left">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Secure Client Area- Portal</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Urgent Delivery Available</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>100% Manual Photo Editing</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>SSL Secured Image Transfer</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Monthly Payment Plan</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Variety of Payment Methods</big>
</p>
</div>
<div id="right">
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>100% Satisfaction Gauranteed</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Money-Back Gaurantee</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Right Price & Best
Quality</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>12hr Quick Turnaround Time</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>Volume Discount Up to 20%</big>
</p>
<p>
<img class="alignnone size-thumbnail wp-image-5242" src="https://i.postimg.cc/SNJHq645/1398913.png" alt="" width="20" height="20"> <big>365 Days Operation Enabled</big>
</p>
</div>
</body>
I have a screenshot as shown below which I am trying to replicate in html/css:
At this moment, I am able to get everything in fiddle with green and orange arrows not properly aligned.
The CSS codes which I have used in order align arrows and desktop in a straight line are:
.tvs
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
Problem Statement:
I am wondering what changes I should make in the fiddle so that I am able to align green and orange arrows in a straight line in between the desktops.
You can wrap them in one div element and use text-align: center on that div.
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.arrows-element {
text-align: center;
}
<div class="tvs">
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-left.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-right.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
</div>
I've got this Div slide which makes your div box change to another div box.
The problem is when I zoom in or out, or when Chromes message pops up, the box where it asks you if you want the webpage translated. I've tried many things but it still moves :/ I think the problem is with the CSS, but as I said, I don't know where the problem is :(
Picture of the problem:
CSS:
#wrapper {
width:960px;
height: 750px;
margin-top: 30px;
overflow:hidden;
position:absolute;
}
#mask {
width: 500%;
}
.item {
width:20%;
height:100%;
float:left;
}
.content {
width:100%;
height:750px;
margin:0 auto;
margin-top: 20px;
}
.content a{
color:#F00;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration:none; }
.selected {
font-weight:700;
}
.clear {
clear:both;
}
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img src="Images/testknapp.png" />
<img src="Images/testknapp1.png" />
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/voltex.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - beliel</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/noize.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">noize - nothing special</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes" height="30"><tr><td class="noizebuy"> <img src="Images/knapp.png" class="noizeitunesbutton" /> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dubwood.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Dubwood - Beatz for streetz</h2><p class="available">available now on itunes & beatport!</p><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <img src="Images/knapp.png" class="dubwooditunes" /> </td><td class="dubwoodbuy"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /> </td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/metaphix.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">metaphix - facets</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <img src="Images/knapp.png" class="metaphixitunes" /> </td><td class="metaphixbuy"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /> </td></tr></table></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dtsk.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">lök - i'm a dtsk lover</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/strobe.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">toltex - strobe</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes" height="30"><tr><td class="noizebuy"> <img src="Images/knapp.png" class="noizeitunesbutton" /> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/gohard.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Toltex - go hard</h2><p class="available">available now on itunes & beatport!</p></br><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <img src="Images/knapp.png" class="dubwooditunes" /> </td><td class="dubwoodbuy"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /> </td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/ineedu.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">crypehead - i need u</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <img src="Images/knapp.png" class="metaphixitunes" /> </td><td class="metaphixbuy"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /> </td></tr></table></td>
</tr>
</table>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<img src="Images/testknapp1.png" />
<img src="Images/testknapp.png" />
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/rewind.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - rewind</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/killerkraut.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">killerkraut - time to get rollin'</h2><p class="available">available now on itunes & beatport!</p><table class="killerkrauttable"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/harbinger.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">oskri - harbinger</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/philosophy.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">dubtheraphy - philosophy</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/philosophy/1118970"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/anditgoes.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">crypehead - and it goes (like this)</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/and-it-goes-like-this/1114352"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
</table>
</div>
</div>
</div>
Do any of you have any idea what the problem could be? :)
change the position of #wrapper to relative and check..
if you need further help, please consider adding your entire style and html in JSFiddle.net. It will be easier for me to locate the actual error.