[RESOLVED] Floating Div's and surrounding div

**mrpaplu** · 08-08-2009 08:44 AM

Hey guys,

I'm building a website right now, and I wanted to make two columns within my content div. I made two floating div's so they were next to eachother. Now when I place more information in my floating divs, the content div won't grow with the inner div's. I've been looking for a solution for this problem, but I could only find things to make a scrollbar, and one thing I hate is scrollbars that aren't the browser's scrollbar.

Here's some code:

HTML Code:

<body>
	<div id="container">
		<div id="header"></div>
        <div id="menu">
        	<?php include("include/menu.php"); ?>
        </div>
        <div id="contentainer">
        	<div id="content">
<div id="blogcontent">
	<div class="item">
    	<div class="title">Blog-item 1</div>
        <div class="content">
        	Er komt hier dus al best wel wat tekst te staan die ik maar even uit me hoofd hier neer moet lullen.
            Dat gaat me opzich nog best makkelijk af lalalalalalalalalaa ik ben gek.
        </div>
        <div class="readmore"><a href="article.php?id=1">Lees meer</a></div>
        <div class="date">12-07-1988</div>
    </div>
    <div class="item">
    	<div class="title">Blog-item 1</div>
        <div class="content">
        	Er komt hier dus al best wel wat tekst te staan die ik maar even uit me hoofd hier neer moet lullen.
            Dat gaat me opzich nog best makkelijk af lalalalalalalalalaa ik ben gek.
        </div>
        <div class="readmore"><a href="article.php?id=1">Lees meer</a></div>
        <div class="date">12-07-1988</div>
    </div>
    <div class="item">
    	<div class="title">Blog-item 1</div>
        <div class="content">
        	Er komt hier dus al best wel wat tekst te staan die ik maar even uit me hoofd hier neer moet lullen.
            Dat gaat me opzich nog best makkelijk af lalalalalalalalalaa ik ben gek.
        </div>
        <div class="readmore"><a href="article.php?id=1">Lees meer</a></div>
        <div class="date">12-07-1988</div>
    </div>
</div>
<div id="fotocontent"">
	<div class="item">
		<div class="title">Foto's</div>
    </div>
</div>
</div>
        </div>
     </div>
</body>

And my css:

Code:

@charset "utf-8";
/* CSS Document */

body {
	margin-top: 0px;
}

#container {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

#header {
	background: url(images/newheader.jpeg);
	height: 138px;
	width: 1024px;
}

#menu {
	height: 25px;
	background: #38a31e;
}

#links {
	padding: 0;
	margin: 0;
	text-align: center;
	list-style: none;
}

#links li {
	background: #38a31e;
	float: left;
	width: 120px;
	height: 25px;
}

#links li:hover {
	background: #adc02e;
}

#links a {
	display: block;
	height: 25px;
	text-decoration: none;
	color: #adc02e;
	font-size: 1.2em;
	font-family: "Cooper Black", "Lucida Sans", sans-serif;
}

#links a:hover {
	color: #38a31e;
}

#content {
	background: #adc02e;
	height: 400px;
	overflow: auto;
}

#links .selected {
	background: #adc02e;
	color: #38a31e;
}

#blogcontent {
	width: 48%;
	min-height: 300px;
	margin-left: 7px;
	margin-top: 7px;
	border: 5px red dashed;
	float: left;
}

#fotocontent {
	width: 48%;
	min-height: 300px;
	margin-right: 7px;
	margin-top: 7px;
	border: 5px red dashed;
	float: right;
}

.item {
	margin: 9px;
	padding: 5px;
	border: 1px black solid;
	min-height: 100px;
	width: 94%
}

.title {
	font-size: 20px;
	font-weight: bold;
}

The html seems a bit messy, but that's because I use the php include a few times.
The css is probably ****ty too, but that's because I'm bad at it.

Thanks for your help,

mrpaplu

**Siddan** · 08-08-2009 01:58 PM

The scrollbars are appearing because you have set the DIV content to a fixed height

**mrpaplu** · 08-08-2009 09:37 PM

Ow, stupid mistake, I had been fooling around with my code, I didn't change the height: 400px; back in min-height: 400px;.

But even with a min-height or no height at all, my content still doesn't grow with the nested div's.

Maybe this will help trieing to find out what's wrong: http://mylowlife.clanslayers.com/index.php

**Siddan** · 08-09-2009 03:03 AM

Yes yes yes...

This is unfortunate about floats...
Easiest would be to add another DIV element last inside your DIV content.

make this div to clear:both

**mrpaplu** · 08-09-2009 07:45 AM

I'd tried that before, wrong way I guess. It's working now, thank you.

**Siddan** · 08-09-2009 07:54 AM

Splendid

You can set this thread to Resolved now, you can find this under Thread tools

Cheers

Thread: [RESOLVED] Floating Div's and surrounding div

Thread Tools

Display

[RESOLVED] Floating Div's and surrounding div

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions