I have spent considerable time researching this and could not find a working solution from the other answers presented here. With that said, I apologize if this seems to be a duplicate; none of the researched solutions worked and I am completely baffled as to why.
The following is the portion of code which is slightly off-center. Oddly, I have the same set-up on a different page - the only difference being one link in the table says "Resume" instead of "Main" - and that is centered perfectly.
EDIT: Sorry, here is the fiddle with the changes suggested by blearn and UndoingTech.
<body class="center style">
<div class="center style">
<object data="Resume.pdf" type="application/pdf" width="100%" height="600px">
</object>
<div style="center" align="center">
Download Resume
</div>
<div style="width:50%;margin:0 auto; justify-content:center" align="center">
<table class="center">
<tr style="color:orangered;text-align:center" class="linkoutline">
<td><a href="index.html"
class="link">Main</a></td>
<td><a href="projects.html"
class="link">Projects</a></td>
<td><a href="https://github.com/mygithub"
class="link">
GitHub</a></td>
<td><a href="https://www.linkedin.com/in/mylinkedin"
class="link">
LinkedIn</a></td>
</tr>
</table>
</div>
</div>
</body>
Here is the css formatting:
html, body
{
padding:0;
margin:0;
}
body.center
{
margin-left:15%;
margin-right:15%;
}
body.style
{
font-family:Helvetica;
font-size:12pt;
background-color:#FFAB91;
}
div.center
{
margin-left:1%;
margin-right:1%;
padding-left:1%;
padding-right:1%;
}
div.style
{
background-color:white;
overflow:hidden;
height:100vh;
}
p.center
{
/*
Should be slightly narrower than the div
*/
margin-left:5%;
margin-right:5%;
}
td
{
/*
Make cell spacing with a transparent horizontal border
*/
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
td.vertpadding
{
/*
Some space between table cells
*/
border-bottom: solid 40px transparent;
}
table.center
{
position:absolute;
bottom:20px;
}
ol, ul
{
margin-top:0;
margin-bottom:0;
padding-left:15;
padding-right:15;
}
h4.small
{
margin-top:0;
margin-bottom:5;
color:steelblue;
font-weight:normal;
font-size:12pt;
}
a
{
color:orangered;
text-decoration:none;
}
a:visited
{
color:firebrick;
}
a:hover, a:active
{
/*
Increase font upon mouseover
*/
font-size:125%;
}
Many solutions recommended doing things such as set the parent container's text-align to center; that did not work. Reducing the child div width and setting margin to 0 auto only worked on the other page, but not this one. The table is only off by about a half an inch. If I set the left margin to something like 30%, it works, but I would like to have the margin be dynamically determined by the dimensions of the parent div if at all possible.
Remove position:absolute from
table.center
{
position:absolute;
bottom:20px;
}
This will make the table fall within its containing div's positioning. Right now, it is statically placing it at an exact location on the html page.
I have made a few edits to your code in this fiddle. Here is a summary of what I did:
Like bleam said, I took out the position code. I added text-align: center to the parent div and margin:auto to the table.
#edited {
border: 5px solid red;
text-align: center;
/* Added after EDIT */
position: absolute:
bottom: 20px;
}
table.center {
/*position: absolute;
bottom: 20px;*/
border: 5px solid blue;
margin: auto;
}
I also changed this line <div style="width:50%;margin:0 auto; justify-content:center" align="center"> to this <div id="edited">. The borders are not needed. They are only there so you can see the boundaries.
EDIT: I have added the position code to the #edited part. That might work for you.
You can center the table keeping it absolutely positioned using the transform trick as shown below so that bottom:20px; works as expected
table.center {
position: absolute;
left:50%; /*add this */
bottom: 20px;
transform: translate(-50%); /* and this */
border: 5px solid red;
/*margin: auto; no longer needed*/
}
html,
body {
padding: 0;
margin: 0;
}
body.center {
margin-left: 15%;
margin-right: 15%;
}
body.style {
font-family: Helvetica;
font-size: 12pt;
background-color: #FFAB91;
}
div.center {
margin-left: 1%;
margin-right: 1%;
padding-left: 1%;
padding-right: 1%;
}
div.style {
background-color: white;
overflow: hidden;
height: 100vh;
}
p.center {
/*
Should be slightly narrower than the div
*/
margin-left: 5%;
margin-right: 5%;
}
td {
/*
Make cell spacing with a transparent horizontal border
*/
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
td.vertpadding {
/*
Some space between table cells
*/
border-bottom: solid 40px transparent;
}
#edited {
border: 5px solid red;
text-align: center;
}
table.center {
position: absolute;
left:50%;
bottom: 20px;
transform: translate(-50%);
border: 5px solid red;
/*margin: auto;*/
}
ol,
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 15;
padding-right: 15;
}
h4.small {
margin-top: 0;
margin-bottom: 5;
color: steelblue;
font-weight: normal;
font-size: 12pt;
}
a {
color: orangered;
text-decoration: none;
}
a:visited {
color: firebrick;
}
a:hover,
a:active {
/*
Increase font upon mouseover
*/
font-size: 125%;
}
<body class="center style">
<div class="center style">
<object data="Resume.pdf" type="application/pdf" width="100%" height="600px">
</object>
<div style="center" align="center">
Download Resume
</div>
<div id="edited">
<table class="center">
<tr style="color:orangered;text-align:center" class="linkoutline">
<td>Main
</td>
<td>Projects
</td>
<td><a href="https://github.com/mygithub" class="link">
GitHub</a>
</td>
<td><a href="https://www.linkedin.com/in/mylinkedin" class="link">
LinkedIn</a>
</td>
</tr>
</table>
</div>
</div>
</body>
Related
I am trying to create the main menu bar of my site. However while it works fine when the browser is in full size, when I resize the menu bar collapses, with half of the choices appearing in a line below the others while I want them to remain in line even if some of them will not be visible.
What can I do using HTML and CSS in order to make the choices of the menu bar to remain in a single line even when the line is not fully visible? I 've already tried every possible position in the main menu and the linking class, adding width with percentage and pixels and adding transition and fixed position combination. Nothing helped.
.main-menu {
background-color:grey;
font-weight:bold;
font-size:xx-large;
color: black;
}
.linking {
text-decoration: none;
color: white;
margin-right: 100px;
border:solid 2px;
border-color: red;
}
<p class="main-menu">
ΦΟΙΤΗΤΕΣ
ΓΡΑΜΜΑΤΕΙΑ
ΕΚΔΟΤΗΣ
....
</p>
May be this helps you. Have a look at the below code snippet.
.main-menu {
background:grey;
font-weight:bold;
font-size:xx-large;
color: #000;
overflow:hidden; /*to hide on collapse*/
height:1em;
}
.linking {
text-decoration: none;
color: #FFF;
margin: 0 100px 0 0;
border:2px solid red;
}
<p class="main-menu">
ΦΟΙΤΗΤΕΣ
ΓΡΑΜΜΑΤΕΙΑ
ΕΚΔΟΤΗΣ
....
</p>
Preview at https://jsfiddle.net/itsselvam/8wvb4k9o/
Please use below css property to do the same
.main-menu
{
background-color:grey;
font-weight:bold;
font-size:xx-large;
color: black;
max-width: 100%;
min-width: 1000px;
}
.linking
{
text-decoration: none;
color: white;
margin-right: 100px;
border:solid 2px;
border-color: red;
}
<p class="main-menu">
<a href="studenthome.html" class="linking">
ΦΟΙΤΗΤΕΣ
</a>
<a href="secrethome.html" class="linking">
ΓΡΑΜΜΑΤΕΙΑ
</a>
<a href="publisherhome.html" class="linking">
ΕΚΔΟΤΗΣ
</a>
<a href="sellerhome.html" class="linking">
Try This:
.main-menu {
background-color:grey;
font-weight:bold;
font-size:xx-large;
color: black;
}
.main-menu .linking {
background-color:grey;
text-decoration: none;
color: white;
margin-right: 100px;
border:solid 2px;
border-color: red;
/* added new css */
width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
position: fixed; /* set position fixed */
}
<p class="main-menu">
ΦΟΙΤΗΤΕΣ <!-- set left 0% as first child -->
ΓΡΑΜΜΑΤΕΙΑ <!-- set left 25% as second child -->
ΕΚΔΟΤΗΣ <!-- set left 50% as third child -->
.... <!-- set left 75% as fourth child -->
</p>
I want to display my subtitles with unique style. So we use the following css code for style
.title-1 {
border-bottom: 1px solid #4db2ec;
margin-bottom: 10px;
padding-bottom: 4px;
position: relative;
font-size: 16px !important;
color: #FFF }
.title-1 > span {
background: #4db2ec;
width: auto;
padding: 4px 7px }
Now I am insert advertisement block with following html code with wrap text.
<div style="float: right; margin-left: 20px;">
<img src="http://domain.com/ad.jpg" height="600" width="160">
</div>
<h2 class="title-1"><span id="location">My Sub Title</span></h2>
now my title style is operlap in my advertisement block. how to solve this?
Here is a jsFiddle: http://jsfiddle.net/f025d5Lh/
Simplest is to add z-index:-999; to .title-1, this will push down the relative div below any div
Demo
CSS
.title-1 {
border-bottom:1px solid #4db2ec;
margin-bottom:10px;
padding-bottom:4px;
position:relative;
font-size:16px !important;
z-index:-999; /* only change */
color:#FFF
}
.title-1 > span {
background:#4db2ec;
width:auto;
padding:4px 7px
}
I'm new to creating websites and can't seem to find out why the alignment of my website doesn't work properly.
On all three of my computer monitors, the website looks fine:
http://www.spectanium.com
But I looked at it on my one friends computer and it looked wrong.
I have a main body and then space on both the right and left, but depending on the monitor I use, there has been varying space and it looks bad...
Can anyone take a look at my code and see what I'm doing wrong?
index.html -->
<html>
<head>
<title>Spectanium Studios</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
Homepage<li>Products</li>
<li>About Us</li>
</ul>
</div>
<div id="content">
<div id="updatesCol">
<h2>Recent Updates</h2>
<h3> * Website Created *</h3>
<p></p>
<p style="font-size:small">Website is now done!</p>
</div>
<div id="contentCol">
<h2>Welcome to Spectanium!</h2>
<p>
<em>So far we have to do a few things before we are ready to roll!</em>
</p>
<h3>Game Stuff:</h3>
<ol>
<li>Finish the actual game.</li>
<li>Get final graphics.</li>
<li>Get final music.</li>
<li>Find out distribution method.</li>
</ol>
<h3>Website Stuff:</h3>
<ol>
<li>Write descriptions for about us.</li>
<li>Improve it</li>
<li>Make it pretty</li>
</ol>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
<p></p>
<p> © 2014 Spectanium Studios</p>
</div>
</body>
</html>
default.css -->
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:190%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
h1, h2, h3 {
color: #B13413;
}
h2 {
font-size: 1.6em;
}
h3 {
margin: 0;
font-size: 1em;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
border-bottom: 1px dotted #CCCCCC;
text-decoration: none;
color: #3284B5;
}
a:hover {
border: none;
}
img {
border: none;
}
/* Header */
#header {
width: 890px;
height: 273px;
margin: 4px 0 4px 300px;
background: url(images/header.png) no-repeat;
}
/* Menu */
#menu {
background: url(images/topborder.png) repeat-x;
width: 950px;
height: 41px;
margin: 0 auto;
margin-left:275px;
background-color: #a1a1a1;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#menu li {
display: inline;
text-decoration:none;
}
#menu a {
display: block;
float: left;
height: 28px;
padding: 15px 20px 0 20px;
text-decoration: none;
color: black;
font-weight:bold;
border-bottom: 0 dotted #DDDDDD;
}
#menu a:hover{
height:8px;
color: #B13413;
}
/* Content */
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:275px;
height: 1000px;
}
#updatesCol {
float: right;
width: 250px;
height:1000px;
border-left:1px black solid;
text-align:center;
}
#contentCol {
float: left;
width: 500px;
padding: 20px 0 0 0;
margin-left:25px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:275px;
padding: 10px 0;
font-size: smaller;
background: url(images/bottomborder.png) repeat-x;
clear:both;
}
#footer * {
color: #666666;
}
This is how it's displaying to me, running on 1920x1080.
http://s30.postimg.org/s3w6clowg/hello.jpg
Problem is your backgorund. It's set to repeat-y but the width it's 1450, so it will repeat-y but won't extend further than that.
Also it'll look a bit to the left because you set all the margins in pixels, like the header:
4px 0 4px 300px .
So no matter what it'll be pushed from the left to the right of 300px. If my resolution is high it'll show a huge gap on the RIGHT side of the page.
This is because you are using margin-left to align the whole website so when it scales up it is still aligned to the left. Use margin: 0 auto; to center your website. If you want the website to stay aligned to the left like it currently is however then use a percentage instead. You probably should also set a background color or having a repeating background to avoid the black background when the page is wider than your background image.
Try this.
body{
background-position-x:center;
}
body > div{
margin:auto !important;
}
Now the content is centered I assure you. But it won't feel centered as the blackened area in the background-image you are using is not centered horizontally. You can see the green line is longer than the red line. Correct that and you're good to go.
My suggestion is that you use an image on background which doesn't have blackened area and achieve that by css
You have specified a absolute margin-left which is causing the problem.
I changed some parts of your css file and it works fine for me.
basically replace absolute margins with
margin-left:auto
margin-right:auto
Changes in default.css
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('http://www.spectanium.com/images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:100%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
#header {
width: 890px;
height: 280px;
margin-left:auto;
margin-right:auto;
background: url(http://www.spectanium.com/images/header.png) no-repeat;
}
#menu {
background: url(http://www.spectanium.com/images/topborder.png) repeat-x;
width: 950px;
height: 51px;
margin-left:auto;
margin-right:auto;
background-color: #a1a1a1;
}
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:auto;
margin-right:auto;
height: 1000px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:auto;
margin-right:auto;
padding: 10px 0;
font-size: smaller;
background: url(http://www.spectanium.com/images/bottomborder.png) repeat-x;
clear:both;
}
As I am transitioning from using template layouts to writing my own css scripts, I have run into many issues, but there's one preventing me from continuing. I have successfully created a 3 column layout with floating divs, however upon browser re-size the right column overlays the middle div. I have imported the script found on Div sections shifts when i resize the window with no success. Basically I want the layout to behave like the current one, at http://www.allstarselectric.com , but using %. I am using % for cross resolution support, so is there a workaround/solution, or are pixels absolutely necessary? Any help would be greatly appreciated.
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li>Home</li>
<li>Special Offers</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
<li>Themes</li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
1
2
3
4
5
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
Electrical
Heating & Air Conditioning
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
Dark
Light
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>
In your CSS, you have a fixed width set for .chromestyle ul. Change that width to a %, and that should fix your problem.
The first answer to the article you linked provides you with the most reasonable solution: "You can wrap around the two divs with another div of a minimum width you want the page to be viewed in." There isn't much point in trying to fit a page to a 320x240 browser; scroll bars can't be avoided in that kind of resolution.
Something like this
.foowrap { min-width: 550px; width: 100%; overflow:auto; }
.foo { width:30%; float:left; }
<div class="foowrap">
<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bum</div>
</div>
Then make sure that the total minimum width of the divs inside (class foo in the example) is not more than the min-width you set. Watch out for borders especially.
By the way, you have two </body> and you're using <center>, both of which are things you should avoid. This bit doesn't make much sense either: <br><tr>text/other</br></tr>
I m having problem to determine from where extra padding is added to a div.
The div containing the text "Video Title" has too much padding added to it. Which is very much unwanted. And i have no idea from where this extra padding is coming.
I have added the styles, the html codes and the link to a page using this sample page.
Please have a look, I'm about to go insane.
The style --
<style type="text/css">
html *
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
table.video_list
{
width: 100%;
border-collapse: collapse;
}
table.video_list td
{
padding: 5px;
width: 33%;
}
div.vid_container
{
/*float:left;*/
/*margin-bottom:15px;
margin-left:5px;
margin-right:15px;*/
position: relative;
display: inline-block;
/*width:242px;*/
margin: 10px;
/*width: 300px;*/
}
div.vid_container div.duration
{
/*background-color:#160A07;*/
/*background-color: transparent;
background-image: url(../images/backs/duration_back_58x24.png);
background-position: center center;
background-repeat: no-repeat;*/
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #1b1b1b;
bottom:27px;
color:#FFFFFF;
float:right;
font-size:14px;
padding:4px;
position:relative;
right:2px;
text-align:center;
width:50px;
filter: alpha(opacity = 85);
opacity: 0.85;
font-weight: bold;
}
div.vid_container div.info_holder
{
width: 248px;
margin: auto;
display: block;
}
div.vid_container div.thumb_holder
{
width: 244px;
height: 184px;
vertical-align: middle;
border: solid 1px #323434;
padding: 1px;
margin: auto;
}
div.vid_container div.thumb_holder img.thumb
{
width: 236px;
height: 176px;
vertical-align: middle;
border: solid 1px #323434;
}
div.vid_container a.title
{
color:#DBA0AC;
display:block;
font-size:14px;
height:35px;
overflow:hidden;
text-decoration:none;
white-space:pre-line;
width:248px;
padding-top: 1px;
padding-bottom: 1px;
}
div.vid_container a.title:hover
{
text-decoration: underline;
}
div.vid_container div.info_holder div.info_text
{
margin-top:5px;
text-align: left;
padding-top: 1px;
padding-bottom: 1px;
}
div.vid_container div.info_holder div.time
{
color: #ccc;margin-top: 5px;font-size: 90%;
text-align: left
}
/******************************************
Videos list
******************************************/
.vid_container .site_name
{
text-transform: capitalize !important;
}
.vid_container img.thumb
{
width: 242px !important;
height: 182px !important;
border:1px solid #323434 !important;
}
/******************************************
List View
******************************************/
div.vid_container_listview
{
width: 100% !important;
}
div.vid_container_listview div.thumb_holder
{
float: left !important;
}
div.vid_container_listview div.info_holder
{
float: left !important;
margin-left: 10px;
}
div.vid_container_listview div.info_holder div.title_holder
{
min-height:30px;width:600px;
}
div.vid_container_listview div.info_holder div.info_text
{
color: #ccc;margin-top: 5px;
}
div.vid_container_listview div.info_holder div.info_text div.site_name
{
font-size: 100%;margin-top:15px;
}
div.vid_container_listview div.info_holder div.info_text div.likes_and_views
{
font-size: 100%;margin-top:15px;
}
div.vid_container_listview div.info_holder div.added_at
{
color: #ccc;margin-top: 5px;font-size: 100%;
}
div.vid_container_listview a.title
{
font-size: 16px;
font-weight: bold;
}
.float_left
{
float: left;
}
.float_right
{
float: right;
}
.clear
{
clear: both;
}
</style>
And the Html:
<div class="vid_container">
<div class="thumb_holder">
<a href="#" title="Brunette Teen Paige Taylor">
<img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
</a>
<div class="duration">30:16</div>
</div>
<div class="info_holder">
<div class="info_text">
<a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
</div>
<div class="time">16 days ago</div>
<div style="color: #ccc;margin-top: 5px;">
<div class="float_left site_name" style="font-size: 90%;">Youtube</div>
<div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
<div class="clear"></div>
</div>
</div>
</div>
The link to this sample page is: Sample Page
You need to change the div.vid_container a.title rule
remove the overflow:hidden and change the height:35px to
height:auto!important;
height:35px;
min-height:35px;
UPDATE
i see ... the problem is that the .duration box is positioned relative and so it remains in the flow of the DOM .. that is what takes the space above the .title..
you need to set the .duration to have position:absolute and margin-top:-27px; (and remove the bottom property
that should take care of all problems..
download firefox if you dont have it.
install firebug (an addon)
open up firebug in firefox and load your page.
right click on the div with video title and select inspect element
look at the style and computed tabs to see what is affecting the padding.
According to my Firebug addin, the extra padding is caused by these two properties of the <a> element contained in the <div>
div.vid_container a.title {
height:35px;
width:248px;
}
Disabling these rules in the css editor removed the extra padding (top and bottom).
Edit : It seems that the overflow could also be due to this property on the <div> :
div.vid_container div.info_holder div.info_text {
padding-top:1px;
}
You can try disabling this rule if it fits your needs better. It will remove the extra padding on the top of the div.
You will however still have extra space on the bottom of the title, which is caused by the height of the <a> element, as explained above.
div.vid_container a.title has a height of 35px which is making your link bigger. I believe this is what is causign the extra space you don't expect (found courtesy of firebug in firefox).
Edit: Didn't even notice the horizontal padding at first but as Thibault Falise there is just a width in there as well.
according to Firebug (which I would recommend you to use) and checking the link you provided that div has a padding of 1px and a top margin of 5px, as specified in the css. So there is no extra padding in itself.
As suggested, maybe you want to change the size of the a.title (height, width).