Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    CCS Two divs below eachother and One right of it

    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

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    can you post a link to better help.
    I will also need your CSS if you want me to help.

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Joepiooo View Post
    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.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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.

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    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>

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    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; }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •