...

View Full Version : Div with problem - Div refuses to apply "width: auto". Please help me?



nikee
05-23-2009, 12:35 PM
Hi.

I'm trying to get a div tag to apply "width: auto", but for some weird reason it doesn't work.

This is how it looks now:
http://blubbz.com/host/images/119.png

And this is how i'd like it to look: (photoshop'd):
http://blubbz.com/host/images/119knk.png

(you can't see the "post-comments-title" because it's too far to the right)


Here's the HTML code for it: (i included the element above and beneath the element i have problems with)

<h2 class="post-title">
<a href="#"> some text goes here</a>
</h2>

<div class="post-comments-title">
some text goes here
</div>

<div class="post-meta-top">
some text goes here
</div>

<div class="post-content">
some text goes here
</div>

And here's the CSS:

.post-title {
padding: 10px 35px 0px 15px;
max-width: 560px;
font-family: Georgia, Arial, sans-serif;
font-size: 26px;
font-weight: normal;
line-height: 25px;
text-decoration: none;
}

.post-comments-title {
position: absolute;
font-family: Helvetica,Arial,sans-serif;
width: 46px;
height: 39px;
background: transparent url(images/comment-title.png) no-repeat top left;
border: none;
right: 10px;
top: 10px;
overflow: hidden;
font-size: 18px;
font-weight: bold;
}

.post-meta-top {
overflow: hidden;
padding: 4px 6px;
margin: 0px 15px;
color: #8BD2FF;
background: #1D303C;
border: 1px solid #1C4159;
width: auto;
color: #88BFE2;
display: block;
}

.post-content {
padding: 5px 15px 0px 15px;
overflow: hidden;
display: block;
line-height: 18px;
font-size: 12px;
font-family: Arial,Helvetica,Sans-Serif;
}

The div that wraps around all these elements has the position "relative", just so you know.

Any help would be extremly appreciated. Thanks in advance!

abduraooft
05-23-2009, 12:53 PM
Can we have a link to your page?

nikee
05-23-2009, 01:01 PM
Can we have a link to your page?

I would post it if i could, but i'm working on it locally. Do u want me to post the whole HTML and CSS code here?

nikee
05-23-2009, 01:21 PM
the html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>my title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="header">
<div class="header-inner">
<div class="header-topper">
<p class="topper-title">Random post:</p>
<p class="topper-post"><a href="#">random post goes here</a></p>

<div class="topper-search">
<form method="get" id="searchform" action="">
<input class="input-search" type="text" value="Search" name="s" id="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" />
<input type="hidden" id="searchsubmit" />
</form>
</div> <!-- End topper-search -->

</div> <!-- End header-topper -->

<div class="header-logo-wrapper">
<div class="header-logo"><a href=""></a></div>
</div>

<div class="header-menu">
<ul>
<li class="page_item"><a href="index.html" title="Home">Home</a></li>
<li class="page_item"><a href="#" title="Images">Images</a></li>
</ul>
</div> <!-- End header-menu -->



<div class="header-nfo">
<div class="breadcrumb">
<p class="breadcrumb-text">
<a href="http://PlanetTechSupport.com/b" title="Browse to: Home">Home</a> / Blog
</p>
</div>

<a href="http://PlanetTechSupport.com/b/?feed=rss2" title="Blog RSS feed" style="float: right;">
<img src="http://PlanetTechSupport.com/b/wp-content/themes/blubbz/images/feed.png" style="float: right; margin-left: 5px; border: none !important;" alt="rss feed" />
</a>

<div class="header-subscribe">
</div>


</div> <!-- End header-nfo -->

</div> <!-- End header-inner -->
</div> <!-- End header -->


<div id="content">
<div class="content-inner"><!-- Index.php -->
<div class="main-content">
<div class="main-content-item">

<h2 class="post-title"><a href="#">some text goes here</a>
</h2>

<div class="post-comments-title">
15
</div>

<div class="post-meta-top">
some text goes here
</div>

<div class="post-content">
some text goes here
</div>

</div> <!-- End main-content-item -->


</div>
</div>

</div> <!-- End main-content -->

<div id="footer">
content content goes here
</div> <!-- End footer -->

</body>
</html>


and the css:


/********************************
Base...
********************************/

body {
background: #FFFFFF;
color: #353535;
font-family: Verdana, Arial, Geneva, sans-serif;
font-size: 11px;
padding: 0px;
margin: 0px;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Arial, sans-serif;
}

h2 {
font-size: 16.5px;
}

*, * a {
margin: 0px;
padding: 0px;
border: 0px;
}

li {
list-style-type: none;
}

a {
color: #205E93;
text-decoration: none;
}

a:hover {
color: #649320;
text-decoration: none;
}

ul, ol {
margin: 0px;
padding: 0px;
}

img, img a, img a:hover {
border: 0px;
}

input, textarea {
background: #FFFFFF;
border: 1px solid #303030;
color: #303030;
padding: 3px 7px;
}

input theckbox {
border: none !important;
}








/********************************
Header
********************************/

#header {
height: auto;
overflow: auto;
background: url(images/headerbg.png) repeat-x top left;
}

.header-inner {
height: auto;
width: 970px;
background: url(images/header.png) no-repeat top left;
display: block;
overflow: hidden;
margin: 0 auto;
padding: 0px 15px;
}

.header-topper {
height: 30px;
margin: 0px;
padding: 0px;
line-height: 30px;
text-transform: uppercase;
font-size: 11px;
color: #6C767D;
}

.header-topper p {
width: auto;
float: left;
}

.topper-title {
margin-right: 10px;
}

.topper-title, .topper-title:hover, .topper-title a, .topper-title a:hover {
border-bottom: none;
text-decoration: none;
}

.topper-title a {
color: #6C8B9C;
}

.topper-title:hover, .topper-title a:hover {
color: #9BA6AE;
cursor: pointer;
}

.topper-post, .topper-post a {
color: #A1BCD1;
cursor: pointer;
}

.topper-post:hover, .topper-post a:hover {
color: #C8D9E6;
}

.topper-search {
float: right;
overflow: hidden;
margin-top: 4px;
}

.header-logo {
height: 62px;
width: 495px;
background: transparent url(images/logo.png) no-repeat top left;
}

.header-logo-wrapper {
height: 82px;
width: 234px;
display: block;
margin-top: 18px;
}

.header-logo a {
height: 62px;
width: 495px;
display: block;
}

.header-menu {
clear: both;
width: 970px;
overflow: hidden;
display: block;
}

.header-menu li {
float: left;
list-style: none;
margin-right: 5px;
height: 37px;
font-size: 13px;
}

.header-menu li a {
padding: 11px 15px;
display: block;
color: #9DBFD8;
}

.header-menu a:hover {
color: #D5E7F4;
text-decoration: none;
}

.current_page_item {
background: transparent url(images/menu-item.png) repeat-x top left;
}

.current_page_item a {
color: #202020 !important;
}

.current_page_item a:hover {
color: #4C4C4C !important;
}

.input-search {
background: #202020;
border: 1px solid #384A53;
color: #8DB6CD;
padding: 3px 6px;
width: 150px;
font-size: 9px;
text-transform: uppercase;
}



.header-nfo {
display: block;
margin: 10px 0px;
text-transform: uppercase;
}

.breadcrumb {
width: auto;
float: left;
overflow: hidden;
}

.breadcrumb-text {
width: auto;
float: left;
overflow: hidden;
margin-top: 3px;
}

.header-subscribe {
width: auto;
float: right;
overflow: hidden;
}

.subscribe-input {
width: 150px;
text-transform: uppercase;
font-size: 9px !important;
padding: 3px 6px !important;
}








/********************************
Content
********************************/

.main-content {
width: 650px;
float: left;
overflow: hidden;
display: block;
}

#content {
height: auto;
overflow: auto;
}

.content-inner {
height: auto;
width: 970px;
display: block;
overflow: hidden;
margin: 0 auto;
padding: 10px 15px;
background: #FFFFFF url(images/contentbg.png) repeat-y top center;
}

.main-content-item {
margin-bottom: 20px;
position: relative;
display: block;
overflow: hidden;
}

/*.main-content-item-single {
border: 1px solid #DCDDDF;
background: #F6F7F8;
}*/

.post-content {
padding: 5px 15px 0px 15px;
overflow: hidden;
display: block;
line-height: 18px;
font-size: 12px;
font-family: Arial,Helvetica,Sans-Serif;
}

.post-content li {
list-style-position: inside;
list-style-image: url(images/bullet.gif);
}

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
margin: 7px 0px;
}

.h3 {
font-size: 18px;
}

.post-content p {
margin-bottom: 12px;
}

.wp-smiley {
margin: 0px !important;
padding: 0px !important;
outline: 0px !important;
border: 0px !important;
}


.post-content img {
padding: 5px;
background: #FFFFFF;
border: 1px solid #DCDDDF;
max-width: 615px;
}

.post-title {
padding: 10px 35px 0px 15px;
max-width: 560px;
font-family: Georgia, Arial, sans-serif;
font-size: 26px;
font-weight: normal;
line-height: 25px;
text-decoration: none;
}

.post-comments-title {
position: absolute;
font-family: Helvetica,Arial,sans-serif;
width: 46px;
height: 39px;
background: transparent url(images/comment-title.png) no-repeat top left;
border: none;
right: 10px;
top: 10px;
overflow: hidden;
font-size: 18px;
font-weight: bold;
}

.post-comments-title a {
color: #FFFFFF;
line-height: 35px;
}

.social-links {
margin-top: 7px;
padding: 0px;
clear: both;
overflow: hidden;
display: block;
font-weight: bold;
}

.social-links a {
text-decoration: underline !important;
color: #333333 !important;
}

.social-links a:hover {
text-decoration: none !important;
color: #444444 !important;
}

li.i_digg {
background:url(images/i_digg.gif) no-repeat;
padding-left: 20px;
float: left;
margin-right: 10px;
}

li.i_stumb {
background:url(images/i_stumb.gif) no-repeat;
padding-left: 20px;
float: left;
margin-right: 10px;
}

li.i_del {
background:url(images/i_del.gif) no-repeat;
padding-left: 20px;
float: left;
margin-right: 10px;
}

li.i_reddit {
background:url(images/i_reddit.gif) no-repeat;
padding-left: 20px;
float: left;
margin-right: 10px;
}

li.i_technorati {
background:url(images/i_technorati.gif) no-repeat;
padding-left: 20px;
float: left;
margin-right: 10px;
}

li.i_print {
background:url(http://planettechsupport.com/b/wp-content/themes/print.gif) no-repeat;
padding-left: 20px;
float: left;
}

.post-meta-top {
overflow: hidden;
padding: 4px 6px;
margin: 0px 15px;
color: #8BD2FF;
background: #1A4970;
border: 1px solid #1C4159;
width: auto;
color: #FFFFFF;
display: block;
}

.post-meta {
padding: 10px 0px;
margin: 0px 15px;
border-top: 1px solid #DFE3E6;
border-bottom: 1px solid #DFE3E6;
color: #2C83BB;
overflow: hidden;
display: block;
}

.post-meta-page {
padding: 10px 15px 15px;
height: 1px;
display: block;
}

.post-meta a {
color: #000000;
text-decoration: none;
border-bottom: 1px dotted black;
}

.post-meta a:hover {
color: #1E4965;
text-decoration: none;
}

.post-title a {
color: #202020;
width: auto;
}

.post-title a:hover {
color: #5E5E5E;
text-decoration: underline;
}

.post-ratings {
margin-top: 5px;
}





/********************************
Sidebar
********************************/

#sidebar h2 {
font-family: Georgia, Arial, sans-serif;
font-size: 16.5px;
font-weight: bold;
}

#sidebar {
width: 300px;
float: right;
overflow: hidden;
display: block;
}

#sidebar ul li {
background: #F6F7F8;
border: 1px solid #DCDDDF;
padding: 10px;
margin-bottom: 10px;
display: block;
overflow: hidden;
}

#sidebar ul li ul {
background: #FEFEFE;
border: 1px solid #DCDDDF;
margin: 5px 0px 0px 0px;
padding: 5px;
}

#sidebar ul li ul li {
padding: 2px 0px 5px 0px;
margin: 5px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed #DCDDDF;
background: transparent;
list-style-position: inside;
list-style-image: url(images/bullet.gif);
}



.recent-comments ul li span, .recent-comments ul li span a {
color: #202020 !important;
text-transform: uppercase;
}



ul.idTabs {
padding: 10px;
margin: 10px 0px;
display: block;
overflow: hidden;
clear: both;
background: #F6F7F8 !important;
border: 1px solid #DCDDDF !important;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
}

.idTabs li {
padding: 5px !important;
background: #FFFFFF !important;
border: 1px solid #DCDDDF !important;
min-width: 50px !important;
text-align: center;
display: block !important;
overflow: hidden !important;
float: left;
margin-right: 10px;
font-size: 12px;
}

.idTabs-content {
background: #FFFFFF;
border: 1px solid #DCDDDF;
padding: 5px;
clear: both;
overflow: hidden;
}

.idTabs a {
text-decoration: none;
}

.idTabs .selected {
font-weight: bold;
}

.idTabs-content ul {
background: transparent !important;
border: 0px !important;
overflow: hidden;
}

.idTabs-content li {
list-style-type: none !important;
float: left !important;
clear: both;
padding: 0px 0px 0px 15px !important;
margin: 3px 0px !important;
background: transparent url(images/bullet.gif) no-repeat center left !important;
border: 0px !important;
text-align: left !important;
width: auto !important;
}





/********************************
Comments
********************************/
#comments-form {
padding: 0px 10px;
overflow: hidden;
}

#comments li {
margin-top: 15px;
padding: 10px 15px;
border: 1px solid #EAEAEA;
min-height: 50px;
}











/********************************
Home page
********************************/

.home-about {
display: block;
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #DCDDDF;
}

.home-contbox {
width: 277px;
min-height: 50px;
padding: 10px;
display: block;
float: left;
overflow: hidden;
background: #FFFFFF;
border: 1px solid #DCDDDF;
margin-right: 15px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
}

.home-contbox ul {
padding-top: 5px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 5px;
}

.home-contbox li {
padding: 2px 0px 5px 0px;
margin: 5px 0px;
list-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed #DCDDDF;
background: transparent;
}

.home-random-img {
padding-top: 15px;
clear: both;
overflow: hidden;
display: block;
}

.home-random-img h2 {
margin-bottom: 10px;
}









/********************************
Image Randomizer
********************************/

.randomizer {
height: 347px;
border: 2px solid #333333;
margin-bottom: 10px;
background: #FFFFFF;
}

.random-img {
max-height: 335px;
padding: 0px !important;
max-width: 614px;
border: none !important;
outline: none !important;
}

.full-url-wrapper {
margin: 15px 0px;
}

.full-url {
width: 400px;
}

.prev-img, .next-img {
width: auto;
padding-top: 5px;
padding-bottom: 5px;
background: #F88733;
float: left;
clear: none;
overflow: hidden;
display: block;
border: 1px solid #A67753;
}

.prev-img {
float: left;
}

.next-img {
float: right;
}

.prev-img a, .next-img a {
color: #222222;
text-decoration: none !important;
padding-left: 15px;
padding-right: 15px;
}

.prev-img a:hover, .next-img a:hover {
color: #414141;
text-decoration: none !important;
}

.img-amount {
width: 190px;
padding: 5px 15px;
background: #F88733;
text-align: center;
overflow: hidden;
display: block;
border: 1px solid #A67753;
color: #452106;
}

.img-box {
height: auto;
margin: 15px 0px;
overflow: hidden;
clear: both;
}

.img-box-item {
width: 187px !important;
height: 120px;
border: 1px solid #333333;
margin-right: 10px;
float: left;
overflow: hidden;
}

.img-box-item-link {
width: 190px !important;
height: 120px !important;
display: block;
}

.img-box-item-img {
max-width: 190px;
padding: 0px !important;
border: none !important;
}






/********************************
Footer
********************************/

#footer {
min-height: 100px;
overflow: hidden;
background: #000000;
padding: 0px;
margin: 0px;
}

.footer-top {
background: #000000;
height: auto;
overflow: hidden;
clear: both;
}

.footer-top-inner {
margin: 0px auto;
width: 970px;
height: auto;
overflow: hidden;
background: transparent url(images/quotes.png) no-repeat center left;
}





.footer-middle {
background: #132F41 url(images/footer-mid-bg.png) no-repeat bottom center;
height: auto;
overflow: hidden;
clear: both;
border-top: 1px solid #1C3C51;
}

.footer-middle-inner {
margin: 0px auto;
min-height: 100px;
width: 970px;
height: auto;
overflow: hidden;
padding: 10px 0px;
}





.footer-btm {
background: #446479;
border-top: 1px solid #668AA1;
height: auto;
overflow: hidden;
clear: both;
}

.footer-btm-inner {
margin: 0px auto;
min-height: 50px;
width: 970px;
height: auto;
overflow: hidden;
padding-top: 10px;
padding-bottom: 10px;
}





.random-quote {
margin: 10px 0px;
padding-left: 75px;
font-size: 15px;
font-family: Arial, helvetica, verdana;
text-transform: uppercase;
color: #A1BCD1;
font-weight: bold;
width: 970px;
}

.footer-middle-inner-box {
width: 30%;
background: transparent url(images/footer-li-border.png) no-repeat center right;
min-height: 100px;
float: left;
overflow: hidden;
display: block;
padding: 10px;
color: #506B7D;
}

.footer-middle-inner-box a {
color: #506B7D;
}

.footer-middle-inner-box h2 {
color: #6D8FA4;
background: transparent url(images/footer-li.png) no-repeat center left;
padding-left: 17px;
margin-bottom: 5px;
}

.footer-middle-inner-box ul {

}

.footer-middle-inner-box ul li {
float: left;
list-style-image: url(images/square.png);
list-style-position: inside;
width: 100%;
color: #506B7D;
padding: 5px;
}

.footer-middle-inner-box ul li a {
color: #92ACBD;
padding: 5px;
}

.footer-middle-inner-box ul li a:hover {
color: #000000;
background: #294A5F;
border: 1px dashed #305268;
outline: 1px dashed #305268;
}

.copyright-line {
margin-bottom: 10px;
text-align: center;
color: #0C2636;
}

.copyright-line a {
text-decoration: none;
color: #000000;
}

.copyright-line a:hover {
text-decoration: none;
color: #0C2636;
}









/********************************
Page Numbers
********************************/

#wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a {
padding: 0;
margin: 0;
border: none;
text-decoration: none;
list-style: none;
text-indent: 0px;
text-align: left;
line-height: 12px;
font-family: Verdana;
}

#wp_page_numbers {
margin-top: 15px;
padding: 5px;
}
#wp_page_numbers ul {
width: 100%;
}
#wp_page_numbers li {
float: left;
display: block;
}

#wp_page_numbers a {
margin-top: 2px;
margin-bottom: 2px;
padding: 5px;
margin-left: 1px;
margin-right: 1px;
display: block;
color: #000000;
background: #ECECEC;
}

#wp_page_numbers li a:hover {
color: #F0F0F0;
background: #323232;
}

#wp_page_numbers li.space {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 2px;
}

#wp_page_numbers li.first_last_page {

}

#wp_page_numbers li.active_page a, #wp_page_numbers li.active_page a:hover {
background: #ECECEC;
border-bottom: 1px solid #BBBBBB;
}

#wp_page_numbers li.active_page a {
padding: 5px;
color: #2A2A2A;
}
#wp_page_numbers li.active_page a:hover {
color: black; /* IE fix */
}

#wp_page_numbers li.page_info {
padding: 5px;
line-height: 15px;
color: #404040;
}

abduraooft
05-23-2009, 02:15 PM
Try

.post-meta-top {
overflow: hidden;
padding: 4px 6px;
margin: 0px 15px;
color: #8BD2FF;
background: #1D303C;
border: 1px solid #1C4159;
width: auto;
color: #88BFE2;
float:left;
}
.post-content {
clear:left;
padding: 5px 15px 0px 15px;
overflow: hidden;
display: block;
line-height: 18px;
font-size: 12px;
font-family: Arial,Helvetica,Sans-Serif;
}

nikee
05-23-2009, 02:39 PM
Thanks a lot :) It works perfectly now!

abduraooft
05-23-2009, 02:53 PM
Umm.. btw I'd recommend you to avoid the use of overflow:hidden; from your elements, unless you really need to hide something.

nikee
05-23-2009, 04:43 PM
Umm.. btw I'd recommend you to avoid the use of overflow:hidden; from your elements, unless you really need to hide something.

Thanks, but why? If everything goes right, nothing should get overflowed? Right?

I need to use it on elements that wraps around floating elements, otherwise the wrapper wont expand (the height), if you know what i mean :P

abduraooft
05-23-2009, 04:48 PM
Thanks, but why? If everything goes right, nothing should get overflowed? Right?
Yeah, but you may not notice if something is wrong with your code, and it may ruin your layout(in some browsers) at a later time(when you make some other adjustments)

nikee
05-23-2009, 05:27 PM
That's true. Thnx for the tip.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum