www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS Query

  1. #1
    Join Date
    Dec 2011
    Posts
    3

    CSS Query

    Hello, I am currently making a website for a project within university and there is a section of CSS which is confusing me to why it isn't functioning like i thought it would.

    Code:
    #ConAd {
    	padding-top: 30px;
    	padding-bottom: 30px;
    	background-color: #D4D3D3;
    }
    
    #Content {
    	height: 100%;
    	width: 750px;
    	float:left;
    	padding: 10px;
    
    }
    
    #Advert {
    	height: 100%;
    	width: 310px;
    	float:right;
    	padding: 10px;
    
    
    }
    Code:
    <div id="ConAd" >
            <div id="Content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
            <div id="Advert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            </div>
        </div>
    http://gyazo.com/4efcbfa28c20a75e257e9710de9a1168

    Here is the code and image of what is happening. I want the dark gray section "ContAd" to be constantly wrapping around the content and advert while providing a colored background "dark gray".

    Except with the padding it is only staying at the top behind the content and advert divs.

    Does anyone have any idea how i can make this happen?

  2. #2
    Join Date
    Dec 2011
    Posts
    3
    I have noticed in the HTML code </div> is at end of lorem ipsum text for content div. Just before anyone rush's and says i'm missing the div.

  3. #3
    Join Date
    Oct 2011
    Location
    Vero Beach, Florida
    Posts
    70
    Not sure if it is exactly the look you have in mind, but try this:
    Code:
    #Wrapper {
    	padding: 30px;
    	background-color: #D4D3D3;
    	}
    
    #ConAd {
    	background:white;
    	overflow:hidden;
    	}
    	
    #Content {
    	width: 750px;
    	float:left;
    	padding: 10px;
    }
    
    #Advert {
    	width: 310px;
    	float:right;
    	padding: 10px;
    }
    HTML Code:
    <div id="Wrapper">
    	<div id="ConAd" >
    		<div id="Content">
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    		</div>
    		<div id="Advert">
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    		</div>
    	</div>
    </div>	
    space
    Orchid Technical Services
    Website Design/Development and Technical Support

  4. #4
    Join Date
    Dec 2011
    Posts
    3
    Thank you very much Bill, this is exactly what i was looking for. I was unaware of the functionality of the overflow command. I will be coming back to this website if i have any other queries. Thanks


    Quote Originally Posted by DeveloperBill View Post
    Not sure if it is exactly the look you have in mind, but try this:
    Code:
    #Wrapper {
    	padding: 30px;
    	background-color: #D4D3D3;
    	}
    
    #ConAd {
    	background:white;
    	overflow:hidden;
    	}
    	
    #Content {
    	width: 750px;
    	float:left;
    	padding: 10px;
    }
    
    #Advert {
    	width: 310px;
    	float:right;
    	padding: 10px;
    }
    HTML Code:
    <div id="Wrapper">
    	<div id="ConAd" >
    		<div id="Content">
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    		</div>
    		<div id="Advert">
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    		</div>
    	</div>
    </div>	

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles