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 Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Floating Articles


    My problem is that I dont want that big gap to the left of the article that is on the right.

    Here is the HTML:
    Code:
    <!DOCTYPE html>
    <html lang="en-us">
    <head>
    <meta charset=UTF-8>
    <title>LetsDevelop</title>
    <link href="screen.css" rel="stylesheet" />
    </head>
    <article id="vid">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/Cm9dQacqLUo" frameborder="0" allowfullscreen></iframe>
    </article>
    <div class="floating-menu">
    <h3>Floating Menu</h3>
    <a href="http://www.quackit.com/css/">CSS</a>
    <a href="http://www.quackit.com/html/">HTML</a>
    <a href="http://www.quackit.com/javascript/">JavaScript</a>
    <a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
    <a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
    </div>
    <article class="right" id="artright">
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    </article>
    <article class="left" id="main">
    <h1>Welcome to my page</h1>
    <p>This is an example of a home page</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    </article>
    <article class="left" id="main">
    <h1>Another Article</h1>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    </article>
    </body>
    <footer><a href="mailto:developerinfinity@gmail.com?Subject=COD%20CLAN%20SITE">Developer Infinity</a></footer>
    </html>
    AND here is the CSS:
    Code:
    /* Screen CSS */
    
    body {
    	background-image:url('wallpaper.jpg'); /* image courtesy of digitalrevolutions.biz */
    	background-repeat:no-repeat;
    	background-attachment: fixed;
    	}
    
    #main {background-color: grey;
    			border-radius: 20px;
    			padding-left: 1%;
    			padding-right: 1%;
    			margin-top: 1%;
    			}
    			
    #artright {background-color: grey;
    			border-radius: 20px;
    			padding-left: 1%;
    			padding-right: 1%;
    			margin-top: 1%;
    			width: 45%;
    			}
    
    div.floating-menu {position:fixed;background:grey;width:150px;z-index:100;}
    div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em; text-decoration:none;}
    
    .floating-menu {text-align:right;
    				margin-left: 85%;
    				}
    
    
    
    		
    a {
        color: black;
        text-decoration: none;
    }
    
    a:hover 
    {
         color:#00A0C6; 
         text-decoration:none; 
         cursor:pointer;  
    }
    
    #vid { float:right;
    		margin-top: 10em;
    		margin-left: 4em;
    		}
    		
    footer {background-color:grey;
    		text-align: center;
    		margin-top: 5px;}
    		
    .left {
      margin-right: 51%;
    }
    .right {
      float: right;
      margin-left: 51%;
    }
    Last edited by logepoge1; 01-02-2013 at 04:09 AM.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Edit: Sorry, completely mis-understood.

    LC.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Give this a try:
    Code:
    <!DOCTYPE html>
    <html lang="en-us">
    <head>
    <meta charset=UTF-8>
    <title>LetsDevelop</title>
    
    <style type="text/css">
    
    /* Screen CSS */
    
    body 
    {
        background-image:url('wallpaper.jpg'); /* image courtesy of digitalrevolutions.biz */
        background-repeat:no-repeat;
        background-attachment: fixed;
    }
    
    #main 
    {
        background-color: grey;
        border-radius: 20px;
        padding-left: 1%;
        padding-right: 1%;
        margin-top: 1%;
        width: 45%;
        float: left;
    }
    
    #vid { float:right;
            margin-top: 10em;
            margin-left: 4em;
            }
            
    div.floating-menu 
    {
        position:fixed;
        top: 20px; 
        right: 50px;
        background:grey;
        width:150px;
        z-index:100;
        text-align:right;
    }
    
    div.floating-menu a, div.floating-menu h3 
    {
        display:block;
        margin:0 0.5em; 
        text-decoration:none;
    }
    
    #artright 
    {
        background-color: grey;
        border-radius: 20px;
        padding-left: 1%;
        padding-right: 1%;
        margin-top: 1%;
        width: 45%;
        float: right;
    }
    
    #article2
    {
        clear: both;
        float: left;
        background-color: grey;
        border-radius: 20px;
        padding-left: 1%;
        padding-right: 1%;
        margin-top: 1%;
        width: 45%;
        
    }
    
    a 
    {
        color: black;
        text-decoration: none;
    }
    
    a:hover 
    {
         color:#00A0C6; 
         text-decoration:none; 
         cursor:pointer;  
    }
            
    footer {background-color:grey;
            text-align: center;
            margin-top: 5px;
            clear: both;}
            
    </style>
    </head>
    <body>
    
    <article id="main">
        <h1>Welcome to my page</h1>
        <p>This is an example of a home page</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    </article>
    
    <div class="floating-menu">
        <h3>Floating Menu</h3>
            <a href="http://www.quackit.com/css/">CSS</a>
            <a href="http://www.quackit.com/html/">HTML</a>
            <a href="http://www.quackit.com/javascript/">JavaScript</a>
            <a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
            <a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
    </div>
    
    <article id="vid">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/Cm9dQacqLUo" frameborder="0" allowfullscreen></iframe>
    </article>
    
    <article id="artright">
        <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    </article>
    
    <article id="article2">
        <h1>Another Article</h1>
        <p>Nulla adipiscing quam quis sem egestas laoreet. Suspendisse eleifend enim at massa lacinia imperdiet. Vivamus sodales molestie est, vitae consectetur eros ultricies ut. Sed dapibus auctor facilisis. Nullam tincidunt elit porta mauris dignissim ultricies. Curabitur quam urna, feugiat at elementum non, accumsan non justo. Donec eu nisl vitae justo lobortis adipiscing. Nam lacus urna, dapibus sed condimentum et, aliquet a mi. Vestibulum commodo, elit et eleifend laoreet, nunc enim pretium ante, at pretium nibh justo id risus. Etiam feugiat, erat ac vestibulum rutrum, est dolor semper lectus, tincidunt sodales sem sapien eget dui. Vivamus at ligula nec tortor elementum pulvinar. Phasellus et nunc sem. Nullam luctus, ligula nec scelerisque pretium, est velit gravida metus, et pulvinar mauris nulla a quam. Nullam facilisis, justo tempus vulputate pellentesque, ligula diam faucibus sem, vel dictum mi nunc sit amet tellus. Ut interdum ante in risus varius in vulputate nunc pharetra.</p>
    </article>
    
    <footer><a href="mailto:developerinfinity@gmail.com?Subject=COD%20CLAN%20SITE">Developer Infinity</a></footer>
    </body>
    </html>
    I hope this helps you.

    There were many errors such as your <footer> being outside the closing </body> tag. Also, no opening <body> tag. I've also changed the code slightly, put some elements above others and moved things around. I noticed you were applying the same ID to a second element on the page, which is not allowed. This is why I created the article2 ID and pretty much gave it the same styles apart from the clear: both declaration.

    Kind regards,

    LC.
    Last edited by LearningCoder; 01-02-2013 at 01:15 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello logepoge1,
    It's always easier if you call an element by the id/class you've given it. The vague "article on the right" description just confuses people. Remember, you've been working with and looking at this code for hours and this is the first time for anyone that would like to help you.

    That gap in your text is caused by the 51% left margin you put on #artright .right To fix that, you should float that element instead. We use floats to put elements beside other elements.

    Once you remove that margin and float it right, #main .left drops because floats need to come first in your markup.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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