https://stackoverflow.com/questions/16184909
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianIn .content within your css, add overflow: auto; . This will wrap your div around your content automatically.
CSS Wrapper / Clearfix Resolution
سؤال
Been having issues trying to get my floated elements to extend with all of my content. I've done some research but I have become officially stumped/exhausted. I've attempted a few clearfix resolutions, standard, micro, and inline, essentially everything listed in this post.
My theories:
- Something wrong with my syntax, or I'm not placing the
<div>in the correct place. - I'm handling the content, or posts, in a fashion that will not allow me to extend the wrapper.
- I'm an extremely special window licker.
My Code
Stylesheet:
/*------------------------Wrapper------------------------*/
html, body, #wrapper, .bar, .line, .content{
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
width: 100%;
overflow: auto;
}
.bar{
float: left;
width: 5%;
}
.line{
float: left;
width: 1%;
}
.content{
float:left;
width:88%;
}
.white{
background-color: #FFFFFF;
}
.red{
background-color: #A80000;
}
.black{
background-color: #000000;
background-image:url('http://i.imgur.com/bcq2U.png');
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
/*------------------------Navigation------------------------*/
#nav{
width: 100%;
float: left;
background-color: #A80000;
border-bottom: 1px solid #C4A23E;
}
ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
font-family: "Arial";
}
li{
float: left;
}
li a{
display: block;
padding: 8px 15px;
text-decoration: none;
color: #000000;
background-color:#A80000;
border-right: 1px solid #C4A23E; }
li a:hover{
color: #A80000;
background-color: #C4A23E;
}
/*------------------------Text------------------------*/
h1 {
color: #FFFFFF;
font-family: "Arial";
text-alighn:center;
}
/*------------------------Boxes------------------------*/
.post{
float:left;
display:inline;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position: top left;
background-color:white;
width:60%;
margin:0px auto;
text-align:left;
padding:2px 5px 2px 5px;
margin:1cm 0cm 1cm 1cm;
}
.logbox{
float:left;
border-style:groove;
border-width:2px;
border-color:#A80000;
background-image:url('http://i.imgur.com/kOFxo.png');
background-repeat:no-repeat;
background-position:top left;
background-color:white;
margin:0px auto;
text-align:center;
padding:80px 80px 80px 80px;
margin:1cm 0cm 1cm 1cm;
}
/*------------------------ClearfixA------------------------*/
/*
.clearfix:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
.clearfix{
display:inline-block;
}
html[xmlns].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
*/
/*------------------------ClearfixB------------------------*/
.cf:before,
.cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom: 1;
}
Webpage:
<? include "config.php";
include_once "markdown.php";
$my_html = Markdown($my_text);
?>
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<?session_start();
if (!isset($_SESSION['username'])){?>
<ul>
<li><a href="login.php">Sign In</a></li>
<li><a href="index.php">Home</a></li>
</ul>
<?}
else{
?>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="admin.php">Admin Panel</a></li>
<li><a href="logout.php">Sign Out</a></li>
</ul>
<?}
?>
</div>
<!-- Entries Start -->
<?$query= "SELECT *
FROM entries
ORDER BY submitted DESC";
$result= mysql_query($query);
$num = mysql_numrows($result);
?>
<?$i=0;
while ($i < $num){
$submit = mysql_result($result, $i, "submitted");
$title = mysql_result($result, $i, "title");
$content = mysql_result($result, $i, "content");
$userid = mysql_result($result, $i, "userid");
$id = mysql_result($result, $i, "id");
?>
<?$q = "SELECT username
FROM users
WHERE $userid = uid";
$r = mysql_query($q);
$username = mysql_result($r, 0, "username");
?>
<span class="post">
<h3><?=$title?></h3>
<?=$submit?><br/>
<?=$username?>
<p><?=$content?></p><br/>
<?$que = "SELECT t.tag
FROM tags AS t
INNER JOIN idx AS i ON t.tagid = i.tid
INNER JOIN entries AS e ON i.eid = e.id
WHERE e.id = '$id'";
$res = mysql_query($que);
$n = mysql_numrows($res);
$x=0;
?>
Tags:
<?while ($x < $n){
$tag = mysql_result ($res, $x, "tag");
$tid = mysql_result ($res, $x, "tid");
?>
<a href = "tag.php?tid=<?=$tag?>">
<?=$tag?></a>,
<?$x++;
}
?>
</span>
<?$i++;
}
?>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
Here is an image of what I am seeing on Chrome:
Any solutions, ideas, resources, help, advice would be greatly appreciated.
Also, I've read that FLOAT templates will be obsolete at some point in time and/or aren't the best way to design a webpage. Any suggestions or resources on how to do it otherwise would also be a welcomed response.
EDIT 4/24/13
Adding the code I receive after viewing the page source.
<!-- HTML Start -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleB.css"/>
<title>Blog</title>
</head>
<body>
<!-- Wrapper Start -->
<div id="wrapper">
<div class="wrapper cf">
<span class="bar white"></span>
<span class="line red"></span>
<span class="content black">
<!-- Content Start -->
<h1>Project Hollywood</h1>
<div id="nav">
<ul>
<li><a href="login.php">Sign In</a></li>
<li><a href="index.php">Home</a></li>
</ul>
</div>
<!-- Entries Start -->
<div class="post">
<h3>Lorem Ipsum Contd</h3>
2013-04-22 16:01:31<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
<a href = "tag.php?tid=Lorem Ipsum">
Lorem Ipsum</a>,
</div>
<div class="post">
<h3>Lorem Ipsum</h3>
2013-04-22 00:12:40<br/>
admin<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.</p><br/>
Tags:
<a href = "tag.php?tid=Lorem">
Lorem</a>,
<a href = "tag.php?tid=Ipsum">
Ipsum</a>,
</div>
<!-- Entries & Content End -->
</span>
<span class="line red"></span>
<span class="bar white"></span>
</div>
</div>
<!-- Wrapper End -->
</body>
</html>
<!-- HTML End -->
Also a JS Bin replication.
المحلول
لا تنتمي إلى StackOverflow
