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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positiontng divs and p etc.

    Hello everyone I'm new here, I will try as best I can to describe the situation I'm dealing with, I'm not allowed to post the exact website and code as it's not mine.

    So I have the main div area in black. 4 divs inside that with images and html. Then several p areas below that in the html with no css it appears. These are controlled by wordpress so I'd like to get the css sorted so that it works when more divs are added or more p writing.

    The two blue divs have float:left assigned in their css, and the two red divs have float:right assigned, all 4 have width:43% in their local style setting. I can't see anything of any other significance in the css, there is padding and colours etc.

    As you can see in the example below whats going on is the bottom blue left Div is moving to the right side.



    When I add clear:both to the left hand side css it does jump back to the left side. But the p areas still invade between the top and bottom divs on the right side.



    What I'd like to do is arrange it as it is below. But also so that any new divs and p areas that are inserted in the back end of wordpress as posts etc. will align also correctly as in the image below. Most importantly I'd like to understand why this is all happening!


  • #2
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The last image is incorrect and is meant to be this one:

    [IMG]<a href="http://s747.photobucket.com/user/accjnt/media/CSS/FinalFloat_zpsb325fb06.jpg.html" target="_blank"><img src="http://i747.photobucket.com/albums/xx115/accjnt/CSS/FinalFloat_zpsb325fb06.jpg" border="0" alt=" photo FinalFloat_zpsb325fb06.jpg"/></a>[/IMG]

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    You have to have the browser area broken down into divs then place and style items inside of each div. Here is an overview of what you want. The CSS that is not indented should be removed once content is place inside of their divs.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    body{
    	margin: 0;
    	padding: 0;
    }
    #wrapper{
    	width: 960px;
    	margin-left: 10px;
    	padding: 10px 10px 10px 10px;
    background-color: black;
    }
    #col_left{
    	width: 470px;
    	float:left;
    height: 400px;
    background-color: blue;
    }
    #col_right{
    	width: 470px;
    	float:right;
    	margin-bottom: 10px;
    height: 400px;
    background-color: red;
    }
    #main{
    	clear:both;
    height: 200px;
    border: 1px solid green;
    background-color: green;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="col_left">BLUE PICTURES</div>
    	<div id="col_right">RED PICTURES</div>
    	<div id="main">ARTICLE IS INSERTED HERE</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."


  •  

    Posting Permissions

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