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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 Column layout knocks subsequent div out

    Hello, I am trying to create a page that first shows 2 columns (50/50% in width) and below that a one column (100% in width) But for some reason my 2 columns knocks the one column outside the wrapper of my webpage.



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Galeria. Single page gallery template</title>
    	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    	<!-- Scroll Script -->
    	<script type="text/javascript" src="js/scroll.js"></script>
    	<!-- Slider Script -->
    	<link rel="stylesheet" type="text/css" media="screen" href="presentation/nivo-slider.css" />
    	<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    	<script type="text/javascript">
    		$(window).load(function() {
    			$('#slider').nivoSlider();
    		});
    	</script>
    
    
    </head>
    
    <body id="top">
    	<!-- BEGIN: wrapper -->
    <div id="wrapper">
    		<!-- BEGIN: header -->
    		<div id="header">
    			<ul>
    				<li><a href="#portfolio" title="Link">home</a></li>
    				<li><a href="#about" title="Link">about me</a></li>
    				<li><a href="#elements" title="HTML Elements">my menu</a></li>
                    <li><a href="#contact" title="Link">contact us</a></li>
    			</ul>
    		</div>
    		<!-- END: header -->
    
    
    		<!-- BEGIN: portfolio -->
    	  <div class="page" id="portfolio">
           
    
                   <h1>hello! we are,</h1>
                   <h6>vegan</h6>
                   <h6>healthy</h6>
                   <h6>delicious.
                   </h6>
             		<div id="side-a"><img src="images/Hours.png"/></div>
            		<div id="side-b"><img src="images/Hours.png"/></div>
    
                   
           
          </div>
            <!-- END: portfolio -->
    		<!-- BEGIN: about -->
    		
               
            <div class="page" id="about">
    			
    
    			  <h2>about me</h2>
    				<img src="images/portrait.jpg" alt="Portrait" class="left" />
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nulla aliquet ligula commodo posuere. Etiam in purus et mauris iaculis fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet est eget eros posuere mattis. Etiam eleifend malesuada elementum. Aliquam erat volutpat. Aliquam dignissim tristique orci, sit amet viverra ipsum tristique eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum commodo dignissim diam, at bibendum arcu imperdiet non. Integer volutpat <a href="#" title="Link">nisi ut nisi consequat vestibulum</a>.  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum commodo dignissim diam, at bibendum arcu imperdiet non. Integer volutpat nisi ut nisi consequat vestibulum.</p>
    				<p class="featured right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nulla aliquet ligula commodo posuere.</p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nulla aliquet ligula commodo posuere. Etiam in purus et mauris iaculis fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet est eget eros posuere mattis. Etiam eleifend malesuada elementum. Aliquam erat volutpat. Aliquam dignissim tristique orci, sit amet viverra ipsum tristique eu. </p>
    				<ul>
    					<li>Lorem ipsum dolor sit amet</li>
    					<li>Lorem ipsum dolor sit amet</li>
    					<li>Lorem ipsum dolor sit amet</li>
    					<li>Lorem ipsum dolor sit amet</li>
    				</ul>
    
    		</div>
    		<!-- END: about -->
    </div>
    </body>
    </html>
    CSS Script

    Code:
    /* ========================== CSS Reset ========================== */
    * {
    	border: 0 none;	
    	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    
    /* ========================== General Styles ========================== */
    body {
    	/*background: url("images/bg_body.jpg") repeat top left;*/
    	text-align: center;
    }
    
    #wrapper {
    	margin: 0 auto;
    	text-align: left;
    	width: 940px;
    }
    
    a {
    	color: #a32626;
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    a.top {
    	background: url("images/bg_top.jpg") no-repeat 0% 50%;
    	color: #E68480;
    	font-size: 13px;
    	padding-left: 25px;
    	
    }
    
    a.top:hover {
    	color: #bbb;
    	text-decoration: none;
    }
    
    blockquote {
    	background: url("images/blockquote.png") no-repeat top left;
    	margin-bottom: 25px;
    	padding-left: 32px;
    }
    
    blockquote p {
    	font-style: oblique;
    	margin-bottom: 5px;
    }
    
    blockquote p.author {
    	color: #99C93C;
    	font-size: 11px;
    	font-style: normal;
    }
    
    em {
    	font-style: oblique;
    }
    
    h1 {
    	color: #99C93C;
    	font-size: 150px;
    	padding-bottom: 20px;
    	}
    
    
    h2 {
    	border-top: 1px solid #555;
    	color: #99C93C;
    	font-size: 24px;
    	margin-bottom: 35px;
    	padding-top: 17px;
    }
    
    h3 {
    	color: #99C93C;
    	font-size: 21px;
    	margin-bottom: 20px;
    }
    
    h4 {
    	color: #99C93C;
    	font-size: 18px;
    	margin-bottom: 20px;
    }
    
    h5 {
    	color: #99C93C;
    	font-size: 14px;
    	font-weight: bold;
    	margin-bottom: 20px;
    }
    
    h6 {
    	color: #99C93C;
    	font-size: 30px;
    	margin-bottom: 20px;
    	margin-left: 50px;
    }
    
    h7 {
    	border-top: 1px solid #555;
    	color: #A32626;
    	font-size: 24px;
    	margin-bottom: 35px;
    	padding-top: 17px;
    }
    
    img {
    	margin-bottom: 15px;
    }
    
    img.left {
    	margin: 0 20px 15px 0;
    }
    
    img.right {
    	margin: 0 0 15px 20px;
    }
    
    img.icon {
    	border: none;
    	margin: 0 12px 10px 0;
    }
    
    li {
    	background: url("images/bullet.jpg") no-repeat 0% 50%;
    	color: #E68480;
    	font-size: 13px;
    	line-height: 21px;
    	padding-left: 18px;
    }
    
    ol {
    	list-style-position: inside;
    	margin-bottom: 20px;
    }
    
    ol li {
    	background: none;
    	padding: 0;
    }
    
    p {
    	color: #E68480;
    	font-size: 13px;
    	line-height: 21px;
    	margin-bottom: 20px;
    }
    
    p.featured {
    	background-color: #333;
    	color: #d5d5d5;
    	font-size: 15px;
    	line-height: 24px;
    	padding: 15px 20px;
    	width: 180px;
    }
    
    p.featured.right {
    	margin-left: 15px;
    }
    
    strong {
    	font-weight: bold;
    }
    
    ul {
    	list-style: none;
    	margin-bottom: 20px;
    }
    
    .left {
    	float: left;
    }
    
    .right {
    	float: right;
    }
    
    
    
    
    
    
    /* ========================== Form Elements Styles ========================== */
    label {
    	color: #E68480;
    	display: block;
    	font-size: 13px;
    	margin-bottom: 10px;
    }
    
    input, textarea {
    	background-color: #333;
    	border: 1px solid #555;
    	color: #bfbfbf;
    	font-size: 12px;
    	padding: 8px 10px;
    	width: 300px;
    }
    
    textarea {
    	width: 500px;
    }
    
    form > div {
    	margin-bottom: 20px;
    }
    
    form button {
    	background-color: #333;
    	color: #99C93C;
    	font-size: 12px;
    	padding: 10px 12px;
    	text-transform: uppercase;
    }
    
    #note  #notification {
    	background-color: #111;
    	border: 1px solid #333;
    	margin-bottom: 20px;
    	padding: 10px;
    }
    
    #note #notification p {
    	font-size: 11px;
    	margin-bottom: 4px;
    }
    
    /* ========================== Table Styles ========================== */
    table {
    	border-collapse: collapse;
    	color: #E68480;
    	font-size: 12px;
    	margin-top: 10px;
    	width: 100%;
    }
    
    th {
    	color: #bbb;
    	font-weight: bold;
    	padding-bottom: 15px;
    	text-align: left;
    }
    
    td {
    	border-top: 1px solid #555;
    	padding: 15px 0;
    }
    
    /* ========================== Header Styles ========================== */
    #header {
    	background: url("images/bg_header.png") no-repeat top left;
    	height: 111px;
    	overflow: hidden;
    	padding: 35px 20px;
    	position: fixed;
    	top: 0px;
    	width: 900px;
    	z-index: 1000;
    }
    
    #header ul {
    	float: right;
    }
    
    #header ul li {
    	background: none;
    	float: left;
    	height: 111px;
    	line-height: 111px;
    	margin-left: 20px;
    	
    	padding: 0px;
    }
    
    #header ul li a {
    	color: #99C93C;
    	font-size: 24px;
    	
    	}
    
    #header ul li a:hover {
    	color: #d2d2d2;
    	text-decoration: none;
    }
    
    
    
    
    /* ========================== Intro text Styles ========================== */
    #intro {
    	color: #99C93C;
    	font-size: 35px;
    	line-height: 42px;
    	margin: 79px 0 0 0;
    }
    
    #hours {
    	margin-bottom: -25px;
    	overflow: hidden;
    	padding-top: 30px;
    }
    
    
    /* ========================== Portfolio Styles ========================== */
    #portfolio {
    	margin-bottom: -25px;
    	overflow: hidden;
    	padding-top: 150px;
    }
    
    #portfolio li {
    	background: none;
    	float: left;
    	margin: 0 20px 20px 0;
    	padding: 0;
    	position: relative;
    	width: 220px;
    }
    
    #portfolio li.last {
    	margin-right: 0;
    }
    
    #portfolio li img {
    	border: 4px solid #222;
    	margin: 0;
    }
    
    #portfolio li img:hover, #portfolio li:hover img {
    	border: 4px solid #444;
    }
    
    #portfolio li .description {
    	background-color: #444;
    	color: #000;
    	display: none;
    	font-size:10px;
    	padding: 8px 10px;
    	position: absolute;
    }
    
    #side-a {
    	float: left;
    	width: 50%;
    	overflow: hidden;
    }
    
    #side-b { 
    	margin: 0;
    	float: left;
    	width: 50%;
    	overflow: hidden;
    	height: 1% 
    }
    
    
    /* ========================== Layout Styles ========================== */
    .page {
    	margin-bottom: 100px;
    	overflow: hidden;
    	padding-top: 150px;
    }
    
    .box_220, .box_300, .box_620 {
    	float: left;
    	margin-right: 20px;
    }
    
    .box_220 {
    	width: 220px;
    }
    
    .box_300 {
    	width: 300px;
    }
    
    .box_620 {
    	width: 620px;
    }
    
    .last {
    	margin-right: 0;
    }
    
    
    
    
    /* ========================== Details List Styles ========================== */
    .details li {
    	background: none;
    	border-bottom: 1px solid #333;
    	margin-bottom: 6px;
    	overflow: hidden;
    	padding: 0 0 6px 0;
    }
    
    .details li p, .details li img {
    	font-size: 12px;
    	margin: 0;
    }
    
    .details .left {
    	color: #eee;
    }
    
    /* ========================== Footer Styles ========================== */
    #footer {
    	background-color: #BBE0CB;
    	overflow: hidden;
    	padding: 35px 0 60px 0;
    }
    
    #footerContainer {
    	margin: 0 auto;
    	text-align: left;
    	width: 940px;
    }
    
    #footer h2 {
    	font-size: 18px;
    	margin-bottom: 18px;
    	padding-top: 14px;
    }
    
    #footer li {
    	background: none;
    	padding: 0;
    }
    
    #footer li a, #footer p {
    	color: #555;
    	font-size: 12px;
    }
    
    #footer li a:hover {
    	color: #bbb;
    	text-decoration: none;
    }
    
    /* ========================== Social List Styles ========================== */
    .social li {
    	margin-bottom: 7px;
    }
    
    .social li a {
    	background: url("images/socialIcons.png") no-repeat top left;
    	height: 16px;
    	line-height: 16px;
    	padding-left: 28px;
    }
    
    .social li a[title=Deviant Art] {
    	background-position: 0 -16px;
    }
    
    .social li a[title=Digg] {
    	background-position: 0 -32px;
    }
    
    .social li a[title=Facebook] {
    	background-position: 0 -48px;
    }
    
    .social li a[title=Flickr] {
    	background-position: 0 -64px;
    }
    
    .social li a[title=Last FM] {
    	background-position: 0 -80px;
    }
    
    .social li a[title=Linkedin] {
    	background-position: 0 -96px;
    }
    
    .social li a[title=My Space] {
    	background-position: 0 -112px;
    }
    
    .social li a[title=Skype] {
    	background-position: 0 -128px;
    }
    
    .social li a[title=Tumblr] {
    	background-position: 0 -144px;
    }
    
    .social li a[title=Twitter] {
    	background-position: 0 -160px;
    }
    
    .social li a[title=Vimeo] {
    	background-position: 0 -176px;
    }

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    something like this?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 940px;
                    margin: 10px auto 10px auto;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid red;
                }
                #colsContainer {
                    margin: 0px 0px 0px 0px;
                    padding: 10px 10px 10px 10px;
                    overflow: hidden;
                    border: 1px solid green;
                }
                #col1 {
                    float: left;
                    width: 47%;
                    margin: 0px 0px 0px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid blue;
                }
                #col2 {
                    float: right;
                    width: 47%;
                    margin: 0px 0px 0px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid brown;
                }
                #moreContent {
                    clear: both;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid orange;
                }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <div id="colsContainer">
                    <div id="col1">
                        Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                        Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                        pharetra vestibulum bibendum morbi ultricies nullam, est nulla,
                    </div>
                    <div id="col2">
                        Nec consectetuer urna dapibus luctus ut,
                        ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                        aliquam non, taciti donec ut.
                    </div>
                </div>
                <div id="moreContent">
                    Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                    Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                    pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                    ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
                    aliquam non, taciti donec ut.
                </div>
            </div>
        </body>
    </html>
    Last edited by bullant; 04-04-2011 at 04:12 AM.

  • Users who have thanked bullant for this post:

    coldmail590 (04-04-2011)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh I see now, I needed another container for the 2 columns! Thanks a lot for your help!

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Posting Permissions

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