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
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

    Tile Layout not going to plan

    I hate CSS sometimes. Okay, can anyone tell me why the 3rd div (3rd square with a white border) is dropping by afew pixels? Here is the picture.

    And then if I add text to the middle one, it drops completely! :S
    See image

    Here is my HTML and CSS:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout Test</title>
    <style type="text/css">
    body {
    	background-color:#1A1A1A;	
    }
    .sqr {
    	background-color:#525252;
    	width:150px;
    	height:150px;
    	border-color:#6d6e66;
    }
    .rec {
    	background-color:#2b5796;
    	width:313px;
    	height:150px;
    	border-color:#4d729f;
    }
    .lrSqr {
    	background-color:#525252;
    	width:313px;
    	height:313px;
    	border-color:#6d6e66;
    }
    .con {
    	width:320px;
    	height:320px;
    	display:inline-block;
    }
    .con span {
    	border-width:1px;
    	border-style:solid;	
    	display:inline-block;
    	margin:3px;
    }
    </style>
    </head>
    <body>
    
        <div class="con">
            <span class="sqr"></span>
            <span class="sqr"></span>
            
            <span class="rec"></span>
        </div>
        
        <div class="con">
        	<span class="lrSqr"></span>
        </div>
        
        <div class="con">
        	<span class="rec"></span>
            
        	<span class="sqr"></span>
            <span class="sqr"></span>
    	</div>
    
    </body>
    </html>
    Last edited by martynball; 08-14-2013 at 07:15 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Why are you using spans in that way? That's not the proper use of them, and it may be causing problems. Spans are used to apply attributes and styles to their contents , and not as block level items. Try using p or div instead. And use display: block; which is default for them anyway.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    martynball (08-14-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    Changed the spans to div's. Still having the exact same problems. And why would I want the display to be "block", that will cause each div to be under the each other?

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi martynball,

    Have you considered adding a float to your CSS?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout Test</title>
    <style type="text/css">
    body {
    	background-color:#1A1A1A;	
    }
    
    *{margin:0;padding:0;border:0;} /*added*/
    
    .sqr {
    	background-color:lavender;
    	width:150px;
    	height:150px;
    	border-color:#6d6e66;
    	display:inline-block;
    	margin:3px;
    
    }
    .rec {
    	background-color:green;
    	width:313px;
    	height:150px;
    	border-color:#4d729f;
            display:block;
            margin:3px;
    }
    
    
    .lrSqr {
    	background-color:yellow;
    	width:313px;
    	height:313px;
    	border-color:#6d6e66;
    	margin:3px;
    }
    .con {
    	width:320px;
    	height:320px;
    	border:1px solid blue;
    	float:left; /*added this float*/
    }
    </style>
    </head>
    <body>
        <div class="con">
            <span class="sqr"></span>
            <span class="sqr"></span>
            <span class="rec"></span>
        </div>
        
       <div class="con">
        	<p class="lrSqr">testing out</p>
        </div>
    
        <div class="con">
            <span class="rec"></span>
            <span class="sqr"></span>
            <span class="sqr"></span>
            </div>
       
    </body>
    </html>
    Hope this helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • Users who have thanked Brandnew for this post:

    martynball (08-14-2013)

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I did this with the divs not the span(which as DrDos pionts out "That's not the proper use of them,") One problem showed up. The spacing[margin] between the divs in the first box would not come out right (at lest in FF) It should have been 10px total, but it was 5px and could not fix it. So I hacked it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout Test</title>
    <style type="text/css">
    body {
    	background-color:#1A1A1A;
    }
    .con {
    	width:320px;
    	height:320px;
    	display:inline-block;
    	//border: 1px solid red;
    }
    .lrSqr {
    	background-color:#525252;
    	width:313px;
    	height:310px;
    	border-color:#6d6e66;
    	margin: 5px;
    }
    
    .sqr {
    	background-color:#525252;
    	width:150px;
    	height:150px;
    	border-color:#6d6e66;
    	float:left;
    	margin: 5px;
    }
    .rec {
    	background-color:#2b5796;
    	width:310px;
    	height:150px;
    	border-color:#4d729f;
    	margin: 5px;
    }
    .recx {
    	background-color:#2b5796;
    	width:310px;
    	height:150px;
    	border-color:#4d729f;
    	margin: 165px 5px 5px 5px;
    }
    </style>
    </head>
    <body>
    
        <div class="con">
            <div class="sqr"></div>
            <div class="sqr"></div>
           <div class="recx"></div>
        </div>
    
        <div class="con">
        	<div class="lrSqr"></div>
        </div>
    
        <div class="con">
        	<div class="rec"></div>
        	<div class="sqr"></div>
            <div class="sqr"></div>
    	</div>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    martynball (08-14-2013)

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Here's wjat I end up with.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout Test</title>
    <style type="text/css">
    body {
    	background-color:#1A1A1A;
    width: 990px;
    margin: 0 auto;
    margin-top:50px;
    }
    .sqr {
    	background-color:#525252;
    	width:150px;
    	height:150px;
    	margin: 2px;
    }
    .rec {
    	background-color:#2b5796;
    	width:306px;
    	height:150px;
    	margin:2px auto;
    }
    .lrSqr {
    	background-color:#525252;
    	width:306px;
    	height:313px;
    }
    .con {
    	width:320px;
    	height:320px;
    	display:block;
    	float: left;
    	padding:3px;
    }
    .con div {
    	
    	float:left;
    	margin:3px;
    
    
    }
    </style>
    </head>
    <body>
    
        <div class="con">
            <div class="sqr"></div>
            <div class="sqr"></div>
            
            <div class="rec"></div>
        </div>
        
        <div class="con">
        	<div class="lrSqr">HELLO</div>
        </div>
        
        <div class="con">
        	<div class="rec"></div>
            
        	<div class="sqr"></div>
            <div class="sqr"></div>
    	</div>
    
    </body>
    </html>
    Everything gets floated, but floating removes any margins on the float side so I added left padding to the .con.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    martynball (08-14-2013)

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    I have removed all margins, just to see if there is still a gap between each element as there shouldn't be. But as always, there is...

    Here is my code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout Test</title>
    <style type="text/css">
    body {
    	background-color:#1A1A1A;	
    	margin:1em;
    }
    
    *{margin:0;padding:0;border:0;} /*added*/
    
    .sqr {
    	background-color:#525252;
    	width:150px;
    	height:150px;
    	display:inline-block;
    }
    .rec {
    	background-color:#2b5796;
    	width:300px;
    	height:150px;
        display:block;
    }
    .lrSqr {
    	background-color:#525252;
    	width:300px;
    	height:300px;
    	border-color:#6d6e66;
    }
    .con {
    	float:left; /*added this float*/
    }
    .con div {
    
    }
    </style>
    </head>
    <body>
        <div class="con">
            <div class="sqr"></div>
            <div class="sqr"></div>
            <div class="rec"></div>
        </div>
        
       <div class="con">
        	<div class="lrSqr">testing out</div>
        </div>
    
        <div class="con">
            <div class="rec"></div>
            <div class="sqr"></div>
            <div class="sqr"></div>
            </div>
       
    </body>
    </html>

  • #8
    Regular Coder
    Join Date
    Aug 2012
    Posts
    122
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi again:

    Would this work for what you're trying to do with the gaps (from what i read, display:inline-block have this margin or space between them, thus why you see the gaps):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout Test</title>
    <style type="text/css">
    body {
    	background-color:#1A1A1A;	
    	margin:1em;
    }
    
    *{margin:0;padding:0;border:0;} /*added*/
    
    .sqr {
    	background-color:#525252;
    	width:150px;
    	height:150px;
    	float:left;
    }
    .rec {
    	background-color:#2b5796;
    	width:300px;
    	height:150px;
    float:left; /*added this float*/
    
    }
    .lrSqr {
    	background-color:#525252;
    	width:300px;
    	height:300px;
    	border-color:#6d6e66;
    }
    .con {
    width:300px;
    height:300px;
    border:1px solid yellow;
    float:left; /*added this float*/
    }
    .con div {
    
    }
    </style>
    </head>
    <body>
        <div class="con">
            <div class="sqr"></div>
            <div class="sqr"></div>
            <div class="rec"></div>
        </div>
        
       <div class="con">
        	<div class="lrSqr">testing out</div>
        </div>
    
        <div class="con">
            <div class="rec"></div>
            <div class="sqr"></div>
            <div class="sqr"></div>
            </div>
       
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • Users who have thanked Brandnew for this post:

    martynball (08-15-2013)


  •  

    Posting Permissions

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