www.webdeveloper.com
Results 1 to 7 of 7

Thread: Layout Help, trouble with floats, clear etc :(

  1. #1
    Join Date
    May 2012
    Posts
    5

    Layout Help, trouble with floats, clear etc :(

    Hey guys, im having trouble mastering the art of using float, clear etc in order to layout my page how i wish and its driving me crazy, as i know im missing something simple.

    Here is an image of the problem: http://i.imgur.com/5kuCiNn.png

    I would like to move the yellow div up alongside the blue one so it forms a neat square, how do i do this? ive tried every variation possible im sure in terms of floa, clear and so on.

    Thank you

    Regards
    Last edited by feudin; 02-26-2014 at 07:55 AM.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,250
    Please post the code in text form in [_code_] [_/code_] brackets (without the underscores). A picture of the code is better than nothing, but does not help us to reproduce the problem!

    Anyway, without the benefit of testing it, I think that one problem is the border and/or margin and padding. Try adding:

    * { margin:0; padding:0; border:0; }

    It may not solve the problem on its own, but it will make your code more cross-browser compatible.

    Then remove 'clear: both' on div2. and make div3 'float: left'. Then the order that the divs are declared in the HTML should be amended to div1, div3, div2. That should put div3 to the right of div1, with div2 below div1.

    Anyway, without testing it that's what I think will happen!
    Last edited by jedaisoul; 02-26-2014 at 09:35 AM.

  3. #3
    Join Date
    Oct 2013
    Posts
    415
    One way to do it:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Float boxes</title>
    <style>
    	#container{
    		margin:auto;
    		width:30em;
    		min-height:30em;
    		border: 0.2em solid black;
    	}
    	#left-container{
    		float:left;
    	}
    	#div1{
    		height:15em;
    		width:15em;
    		background-color:blue;
    	}
    	#div2{
    		height:15em;
    		width:15em;
    		background-color:red;
    	}
    	#div3{
    		height:30em;
    		width:15em;
    		background-color:yellow;
    		float:left;
    	}
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="left-container">
    		<div id="div1"></div>
    		<div id="div2"></div>
    	</div>
    	<div id="div3"></div>
    </div>
    </body>
    </html>
    Last edited by Kevin2; 02-26-2014 at 10:20 AM. Reason: removed some unneeded text-align code

  4. #4
    Join Date
    May 2012
    Posts
    5
    Thank you for helping guys, I now realise i need to, for the purpose of layouts, use divs within divs to get the desired outcome, as Kevin has demonstrated with the 'left-container'. Thank you, now for a little more practice and onto javascript . Thanks again

    Regards

  5. #5
    Join Date
    May 2012
    Posts
    5
    Quote Originally Posted by jedaisoul View Post
    * { margin:0; padding:0; border:0; }
    What does the '*' mean? would i apply it to the body or literally use the * ?

  6. #6
    Join Date
    Mar 2011
    Posts
    1,136
    "*" is a wildcard marker, which in this case means that the CSS rule is applied to all elements.
    Rick Trethewey
    Rainbo Design

  7. #7
    Join Date
    Mar 2012
    Posts
    1,250
    Quote Originally Posted by feudin View Post
    What does the '*' mean? would i apply it to the body or literally use the * ?
    Just to expand on Rick's reply, you put '*' literally. This is often put as the first line in the first style sheet loaded (so that it is overruled by any explicit settings you make). It is used because different browsers use different default settings, which can be a devil to debug because there is nothing in your code that causes it!

    Note: As far as I am aware, '*' is not in the CSS standards, but is implemented by all the major browsers.

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