CCS Two divs below eachother and One right of it

Joepiooo · 06-19-2012, 12:56 PM

Hello,

I have to divs that are filled automatic from database.

First div is called (left)

Code:

#contentblok_links {display:block; float:left; clear:left; width:480px; margin:0 5px 0 5px;}

Second div is called (right)

Code:

#contentblok_rechts {display:block; float:right; width:480px; margin:0 5px 0 5px;}

Now I got 3 text colums and 2 of them are in #contentblok_links and only one in #contentblok_rechts.

I want to show the #contentblok_links divs on the left below eachother and the #contentblok_rechts on the right but next to my first div on the left...

I cant get it right... Can somebody help me out... The right div is on the right btw but not on top of the page but down the second div on the right

aaronhockey_09 · 06-19-2012, 02:24 PM

can you post a link to better help.
I will also need your CSS if you want me to help.

Joepiooo · 06-20-2012, 07:34 AM

I'm testing it on a local machine so I cant give you a link.

I will try to explain it again.

Code:

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

/* vaste instellingen */
blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,label,li,ul,ol,p,pre,textarea,table,td,th {margin:0; padding:0; font-weight:normal}
html, body {height: 100%;}

img {border:none; margin:0; padding:0; display:block;}
a, a:active, a:focus {outline:none;}
a img {border:none;}

.clearboth {clear: both;}
.clearleft {clear: left;}
.clearright {clear: right;}

/* body style */
body {background:#dfdfdf url(../../images/background.png) repeat-x top; font:normal 62.5%/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif; color:#3a3737;}

.container {width:980px; margin:auto; font-size:120%; position:relative; min-height:100%; margin-bottom: -151px;}

.headercontent {background:url(../../images/header.png); height:300px; position:relative;}

/* Footer */
#footer_overlay {  position: absolute; margin:auto; background:url(../../images/balk_overlay.png); width: 986px; height: 82px; z-index: 10;}
#footer {height:151px; width:100%; background:url(../../images/footer.png) repeat-x; position:relative; font-family:arial, serif; font-size:12px; color:rgb(255,255,255); text-align:center;}
.footerlink {padding-top: 60px;}
#footer a {padding:0px 10px; color:rgb(255,255,255);}
#tt_logo {position:absolute; z-index:1; float:left; left: 50%; margin-left:-493px;}

/* menu style*/

.cssmenu {
	margin-top:50px;
	background:#313131;
	}
.cssmenu > ul {
	padding:1px 0 0 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:35px;
	font:normal 8pt verdana, arial, helvetica;
}
.cssmenu > ul li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:148px;
}
.cssmenu > ul li a:link, .cssmenu > ul li a:visited {
	padding:8px 0 0 0;
	text-align:center;
	display:block;
	text-decoration:none;
	background:#313131;
	color:#757575;
	width:148px;
	height:27px;
}
.cssmenu > ul li:hover a, .cssmenu > ul li a:hover, .cssmenu > ul li a:active {
	padding:8px 0 0 0;
	text-align:center;
	display:block;
	text-decoration:none;
	background:#666666;
	color:#ffffff;
	width:146px;
	height:27px;
}
.cssmenu > ul li ul {
	margin:0;
	padding:1px 0 0;
	list-style:none;
	display:none;
	background:#313131;
	width:146px;
	position:absolute;
	top:35px;

}
.cssmenu > ul li:hover ul {
	display:block;
}
.cssmenu > ul li ul li {
	width:146px;
	clear:left;
	width:146px;
}
.cssmenu > ul li ul li a:link, .cssmenu > ul li ul li a:visited {
	clear:left;
	background:#313131;
	padding:8px 0 0 0;
	text-align:center;
	width:146px;
	position:relative;
	z-index:1000;
}
.cssmenu > ul li ul li:hover a, .cssmenu > ul li ul li a:active, .cssmenu > ul li ul li a:hover {
	clear:left;
	background:#666666;
	padding:8px 0 0 0;
	text-align:center;
	width:146px;
	position:relative;
	z-index:1000;
}
.cssmenu > ul li ul li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	background:#ffffff;
	z-index:900;
}
.cssmenu > ul li ul li:hover ul.navigation-3 {
	display:block;
}
.cssmenu > ul li ul li ul.navigation-3 li a:link, .cssmenu > ul li ul li ul.navigation-3 li a:visited {
	background:#313131;
}
.cssmenu > ul li ul li ul.navigation-3 li:hover a, .cssmenu > ul li ul li ul.navigation-3 li a:hover, .cssmenu > ul li ul li ul.navigation-3 li a:active {
	background:#ec454e;
}

/* Banner style*/

#banner {display:block; float:left; position:relative; width:980px; height:243px; padding-top: 20px;}
#banner .imgblok { position:absolute; z-index:0; }
#banner .show { z-index:1; }

/* Contentblok links */
.contentblok_container {display:block; position:relative; width:980px; height:100%; margin:5px 0 30px 0;}
.content_overlay {display:block; float:left; position:relative; width:980px; height:100%; margin:5px 0 30px 0;}
#contentblok_links {display:block; float:left; clear:left; width:470px; margin:0 15px 0 5px;}
#contentblok_links h1, #contentblok_links h2, #contentblok_links h3 {font-family:Arial, Helvetica, sans-serif; border-bottom:1px dotted #999; }
#contentblok_links h1 {font-size:20px; color: #e2001a;}
#contentblok_links h2 {font-size:18px; border-top:1px dotted #999999;}
#contentblok_links h3 {font-size:18px;}
#contentblok_links h4 {font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:20px 10px 0 10px; font-weight:bold;}
#contentblok_links p {font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#contentblok_links hr.hrline {width:480px; border:0px; border-top:1px dotted #999;}/*


/* Contentblok rechts */
#contentblok_rechts {display:block; float:right; clear:right; width:470px; margin:0 5px 0 15px;}
#contentblok_rechts h1, #contentblok_links h2, #contentblok_links h3 {font-family:Arial, Helvetica, sans-serif; border-bottom:1px dotted #999; }
#contentblok_rechts h1 {font-size:20px; color: #e2001a;}
#contentblok_rechts h2 {font-size:18px; border-top:1px dotted #999999;}
#contentblok_rechts h3 {font-size:18px;}
#contentblok_rechts h4 {font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:20px 10px 0 10px; font-weight:bold;}
#contentblok_rechts p {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.content_image {margin:10px 0 10px 0;}

.imgcontainer {padding:11px; width:678px; height:185px; background-image:url(../../images/frame_afbeeldingen.png);}
.imgcontainer img, .imagemiddel img, .imageklein img {margin:0; padding:0; width:678px;}
.imgcontent, .imagemiddelcontent, .imagekleincontent {overflow:hidden; width:678px; height:186px;}
.imagemiddel {padding:8px; width:430px; height:116px; background-image:url(../../images/frame_afbeeldingen_midden.png);}
.imagemiddel img {width:430px;}
.imagemiddelcontent {width:430px; height:117px;}
.imageklein {padding:6px; width:318px; height:86px; background-image:url(../../images/frame_afbeeldingen_klein.png); float:left;}
.imageklein img {width:318px;}
.imagekleincontent {width:318px; height:87px;}

Thats my stylesheet and this is the code that echos the text block left

PHP Code:


			
<?php
    if(isset($tekst->tekst_positie) && $tekst->tekst_positie == 1)
    {
?>
                    <div id="contentblok_links">
                    <h1><strong><?php echo $tekst->tekst_header; ?></strong></h1>
                    <?php echo $tekst->tekst_content."\n"; ?>
                    </div>
<?php
    }
?>

And this is the one on the right

PHP Code:


			
<?php
    if(isset($tekst->tekst_positie) && $tekst->tekst_positie == 2)
    {
?>
                    <div id="contentblok_rechts">
                    <h1><strong><?php echo $tekst->tekst_header; ?></strong></h1>
                    <?php echo $tekst->tekst_content."\n"; ?>
                    </div>
<?php
    }
?>

Sometimes it is working but when I'm adding more text blocks it is going very wrong.

When I add a text in my database I give a position (1 = left, 2 = right) and with the if statement it is working great but not all the time... Can somebody help me out?

Thanks

aaronhockey_09 · 06-20-2012, 01:10 PM

Quote:

Originally Posted by Joepiooo

I'm testing it on a local machine so I cant give you a link.

I will try to explain it again.

Code:

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

/* vaste instellingen */
blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,label,li,ul,ol,p,pre,textarea,table,td,th {margin:0; padding:0; font-weight:normal}
html, body {height: 100%;}

img {border:none; margin:0; padding:0; display:block;}
a, a:active, a:focus {outline:none;}
a img {border:none;}

.clearboth {clear: both;}
.clearleft {clear: left;}
.clearright {clear: right;}

/* body style */
body {background:#dfdfdf url(../../images/background.png) repeat-x top; font:normal 62.5%/1.5 "Lucida Grande", "Lucida Sans Unicode", sans-serif; color:#3a3737;}

.container {width:980px; margin:auto; font-size:120%; position:relative; min-height:100%; margin-bottom: -151px;}

.headercontent {background:url(../../images/header.png); height:300px; position:relative;}

/* Footer */
#footer_overlay {  position: absolute; margin:auto; background:url(../../images/balk_overlay.png); width: 986px; height: 82px; z-index: 10;}
#footer {height:151px; width:100%; background:url(../../images/footer.png) repeat-x; position:relative; font-family:arial, serif; font-size:12px; color:rgb(255,255,255); text-align:center;}
.footerlink {padding-top: 60px;}
#footer a {padding:0px 10px; color:rgb(255,255,255);}
#tt_logo {position:absolute; z-index:1; float:left; left: 50%; margin-left:-493px;}

/* menu style*/

.cssmenu {
	margin-top:50px;
	background:#313131;
	}
.cssmenu > ul {
	padding:1px 0 0 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:35px;
	font:normal 8pt verdana, arial, helvetica;
}
.cssmenu > ul li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:148px;
}
.cssmenu > ul li a:link, .cssmenu > ul li a:visited {
	padding:8px 0 0 0;
	text-align:center;
	display:block;
	text-decoration:none;
	background:#313131;
	color:#757575;
	width:148px;
	height:27px;
}
.cssmenu > ul li:hover a, .cssmenu > ul li a:hover, .cssmenu > ul li a:active {
	padding:8px 0 0 0;
	text-align:center;
	display:block;
	text-decoration:none;
	background:#666666;
	color:#ffffff;
	width:146px;
	height:27px;
}
.cssmenu > ul li ul {
	margin:0;
	padding:1px 0 0;
	list-style:none;
	display:none;
	background:#313131;
	width:146px;
	position:absolute;
	top:35px;

}
.cssmenu > ul li:hover ul {
	display:block;
}
.cssmenu > ul li ul li {
	width:146px;
	clear:left;
	width:146px;
}
.cssmenu > ul li ul li a:link, .cssmenu > ul li ul li a:visited {
	clear:left;
	background:#313131;
	padding:8px 0 0 0;
	text-align:center;
	width:146px;
	position:relative;
	z-index:1000;
}
.cssmenu > ul li ul li:hover a, .cssmenu > ul li ul li a:active, .cssmenu > ul li ul li a:hover {
	clear:left;
	background:#666666;
	padding:8px 0 0 0;
	text-align:center;
	width:146px;
	position:relative;
	z-index:1000;
}
.cssmenu > ul li ul li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	background:#ffffff;
	z-index:900;
}
.cssmenu > ul li ul li:hover ul.navigation-3 {
	display:block;
}
.cssmenu > ul li ul li ul.navigation-3 li a:link, .cssmenu > ul li ul li ul.navigation-3 li a:visited {
	background:#313131;
}
.cssmenu > ul li ul li ul.navigation-3 li:hover a, .cssmenu > ul li ul li ul.navigation-3 li a:hover, .cssmenu > ul li ul li ul.navigation-3 li a:active {
	background:#ec454e;
}

/* Banner style*/

#banner {display:block; float:left; position:relative; width:980px; height:243px; padding-top: 20px;}
#banner .imgblok { position:absolute; z-index:0; }
#banner .show { z-index:1; }

/* Contentblok links */
.contentblok_container {display:block; position:relative; width:980px; height:100%; margin:5px 0 30px 0;}
.content_overlay {display:block; float:left; position:relative; width:980px; height:100%; margin:5px 0 30px 0;}
#contentblok_links {display:block; float:left; clear:left; width:470px; margin:0 15px 0 5px;}
#contentblok_links h1, #contentblok_links h2, #contentblok_links h3 {font-family:Arial, Helvetica, sans-serif; border-bottom:1px dotted #999; }
#contentblok_links h1 {font-size:20px; color: #e2001a;}
#contentblok_links h2 {font-size:18px; border-top:1px dotted #999999;}
#contentblok_links h3 {font-size:18px;}
#contentblok_links h4 {font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:20px 10px 0 10px; font-weight:bold;}
#contentblok_links p {font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#contentblok_links hr.hrline {width:480px; border:0px; border-top:1px dotted #999;}/*


/* Contentblok rechts */
#contentblok_rechts {display:block; float:right; clear:right; width:470px; margin:0 5px 0 15px;}
#contentblok_rechts h1, #contentblok_links h2, #contentblok_links h3 {font-family:Arial, Helvetica, sans-serif; border-bottom:1px dotted #999; }
#contentblok_rechts h1 {font-size:20px; color: #e2001a;}
#contentblok_rechts h2 {font-size:18px; border-top:1px dotted #999999;}
#contentblok_rechts h3 {font-size:18px;}
#contentblok_rechts h4 {font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:20px 10px 0 10px; font-weight:bold;}
#contentblok_rechts p {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.content_image {margin:10px 0 10px 0;}

.imgcontainer {padding:11px; width:678px; height:185px; background-image:url(../../images/frame_afbeeldingen.png);}
.imgcontainer img, .imagemiddel img, .imageklein img {margin:0; padding:0; width:678px;}
.imgcontent, .imagemiddelcontent, .imagekleincontent {overflow:hidden; width:678px; height:186px;}
.imagemiddel {padding:8px; width:430px; height:116px; background-image:url(../../images/frame_afbeeldingen_midden.png);}
.imagemiddel img {width:430px;}
.imagemiddelcontent {width:430px; height:117px;}
.imageklein {padding:6px; width:318px; height:86px; background-image:url(../../images/frame_afbeeldingen_klein.png); float:left;}
.imageklein img {width:318px;}
.imagekleincontent {width:318px; height:87px;}

Thats my stylesheet and this is the code that echos the text block left

PHP Code:


			
<?php
    if(isset($tekst->tekst_positie) && $tekst->tekst_positie == 1)
    {
?>
                    <div id="contentblok_links">
                    <h1><strong><?php echo $tekst->tekst_header; ?></strong></h1>
                    <?php echo $tekst->tekst_content."\n"; ?>
                    </div>
<?php
    }
?>

And this is the one on the right

PHP Code:


			
<?php
    if(isset($tekst->tekst_positie) && $tekst->tekst_positie == 2)
    {
?>
                    <div id="contentblok_rechts">
                    <h1><strong><?php echo $tekst->tekst_header; ?></strong></h1>
                    <?php echo $tekst->tekst_content."\n"; ?>
                    </div>
<?php
    }
?>

Sometimes it is working but when I'm adding more text blocks it is going very wrong.

When I add a text in my database I give a position (1 = left, 2 = right) and with the if statement it is working great but not all the time... Can somebody help me out?

Thanks

Can you post an image of what it looks like when its going wrong.

Joepiooo · 06-20-2012, 03:09 PM

aaronhockey_09 · 06-20-2012, 03:16 PM

is there any way you can "view source" and then paste all the HTML in here.
I cant really see whats going on without seeing all 3 divs.

Joepiooo · 06-20-2012, 03:33 PM

Code:

<div class="contentblok_container">
					<div id="contentblok_links">
					<h1><strong>Tekst Blok Links</strong></h1>
                    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae quam eros, quis cursus lacus. Sed velit nisi, convallis a dictum non, dictum quis ipsum. Nam eu magna lacus. Donec nec augue tellus, vitae rhoncus augue. Vivamus mattis aliquet felis, non fermentum est dignissim eget. Mauris mattis vulputate urna, sed dapibus diam pulvinar non. In id justo arcu. Integer a gravida orci. Fusce dictum molestie eleifend. Fusce convallis, libero ac malesuada egestas, orci enim euismod ligula, vel tincidunt massa purus et libero. Sed ut sem tempor ligula sagittis pharetra.</p>

                    </div>
		
		
					<div id="contentblok_links">
					<h1><strong>Nieuws</strong></h1>
                    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae quam eros, quis cursus lacus. Sed velit nisi, convallis a dictum non, dictum quis ipsum. Nam eu magna lacus. Donec nec augue tellus, vitae rhoncus augue. Vivamus mattis aliquet felis, non fermentum est dignissim eget. Mauris mattis vulputate urna, sed dapibus diam pulvinar non. In id justo arcu. Integer a gravida orci. Fusce dictum molestie eleifend. Fusce convallis, libero ac malesuada egestas, orci enim euismod ligula, vel tincidunt massa purus et libero. Sed ut sem tempor ligula sagittis pharetra.</p>
                    </div>
		
					<div id="contentblok_rechts">
					<h1><strong>Tekst Blok Rechts</strong></h1>

                    <p>
Nulla facilisi. Curabitur tristique pretium bibendum. Vestibulum adipiscing fermentum egestas. Maecenas ultrices lorem tempus purus venenatis varius. Vivamus at aliquet risus. Morbi magna nibh, suscipit faucibus gravida ac, imperdiet a ipsum. Mauris ac gravida augue. Nunc mi odio, rutrum ut lobortis et, imperdiet vitae ipsum. Nullam porttitor ullamcorper urna eget ultricies. Vivamus ullamcorper tortor non metus eleifend eget mattis eros tincidunt. Morbi dolor nunc, mattis mattis pharetra nec, ultrices vel sapien. Etiam aliquet lectus dictum velit semper luctus.</p>
                    </div>	
                    </div>

aaronhockey_09 · 06-20-2012, 03:48 PM

What you should do is wrap the left side, in another div floated left.
And wrap the right side, in another div floated right.

like below.

Code:

<div class="contentblok_container">
                    <div class="float_left_container">
					<div id="contentblok_links">
					<h1><strong>Tekst Blok Links</strong></h1>
                    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae quam eros, quis cursus lacus. Sed velit nisi, convallis a dictum non, dictum quis ipsum. Nam eu magna lacus. Donec nec augue tellus, vitae rhoncus augue. Vivamus mattis aliquet felis, non fermentum est dignissim eget. Mauris mattis vulputate urna, sed dapibus diam pulvinar non. In id justo arcu. Integer a gravida orci. Fusce dictum molestie eleifend. Fusce convallis, libero ac malesuada egestas, orci enim euismod ligula, vel tincidunt massa purus et libero. Sed ut sem tempor ligula sagittis pharetra.</p>

                    </div>
		
		
					<div id="contentblok_links">
					<h1><strong>Nieuws</strong></h1>
                    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae quam eros, quis cursus lacus. Sed velit nisi, convallis a dictum non, dictum quis ipsum. Nam eu magna lacus. Donec nec augue tellus, vitae rhoncus augue. Vivamus mattis aliquet felis, non fermentum est dignissim eget. Mauris mattis vulputate urna, sed dapibus diam pulvinar non. In id justo arcu. Integer a gravida orci. Fusce dictum molestie eleifend. Fusce convallis, libero ac malesuada egestas, orci enim euismod ligula, vel tincidunt massa purus et libero. Sed ut sem tempor ligula sagittis pharetra.</p>
                    </div>
</div>
<div class="float_right_container">
		
					<div id="contentblok_rechts">
					<h1><strong>Tekst Blok Rechts</strong></h1>

                    <p>
Nulla facilisi. Curabitur tristique pretium bibendum. Vestibulum adipiscing fermentum egestas. Maecenas ultrices lorem tempus purus venenatis varius. Vivamus at aliquet risus. Morbi magna nibh, suscipit faucibus gravida ac, imperdiet a ipsum. Mauris ac gravida augue. Nunc mi odio, rutrum ut lobortis et, imperdiet vitae ipsum. Nullam porttitor ullamcorper urna eget ultricies. Vivamus ullamcorper tortor non metus eleifend eget mattis eros tincidunt. Morbi dolor nunc, mattis mattis pharetra nec, ultrices vel sapien. Etiam aliquet lectus dictum velit semper luctus.</p>
                    </div>
</div>	
                    </div>

and the CSS

Code:

.float_left_container { float:left; width:490px;}
.float_right_container { float:right:width:490px; }