Divs like I want them?

Discussion in 'HTML & Website Design' started by AndreasB, Nov 4, 2009.

0
  1. #1
    Sorry for a fairly bad title, but I hope anyone can help me.

    What I'm looking for is an HTML / CSS code which can make div placements like I want them to be.
    Here's a picture to illustrate what I have in mind:

    [​IMG][/IMG]


    How to do this with HTML and CSS?
     
    AndreasB, Nov 4, 2009 IP
  2. xpirtdesign

    xpirtdesign Peon

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    search for clearfix in Google. You will need a container div around the 2 top boxes and the 2 bottom boxes. These will contain the left and right floats. Now to keep the left floated box and the right floated box equal in height (depending on how much content in each box) you will need to apply the clearfix method. If the content will be static, just define the heights so they are equal. If you are looking for the actualy HTML/CSS coding, let me know.
     
    xpirtdesign, Nov 4, 2009 IP
  3. grothbe

    grothbe Peon

    Messages:
    13
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The exact implementation will depend on how you want them to space and align.
    Basically if you want two divs to be placed one on top of another, you just set display:block and clear:both on both.
    If you want them to be one to the left of another, you set display:block, clear:none and float:left on both of them.
    And then it's just to play around with those two ways of positioning the divs and putting them in another divs to get the result you want.
     
    grothbe, Nov 4, 2009 IP
  4. tobykw13

    tobykw13 Peon

    Messages:
    41
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    tobykw13, Nov 4, 2009 IP
  5. Gayantha

    Gayantha Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Check this out..
    hope you can get some Idea from this.. :)

    
<head>
<title>Test Page</title>
<style type="text/css">
	#id-head{
		width:800px;
		height:100px;
	}
	
	#id-mid{
		width:800px;
		height:100px;
	}
	
	#id-m1{
		width:370px;
		height:100px;
		float:left;
	}

</style>
</head>

<body>
<div id="id-head">Head</div>
<div id="id-mid">
	<div id="id-m1">Mid 1 L</div>
    <div id="id-m1" align="right">Mid 1 R</div>
    <div class="flt"></div>
</div>
<div id="id-mid">
	<div id="id-m1">Mid 2 L</div>
    <div id="id-m1" align="right">Mid 2 R</div>
	<div class="flt"></div>
</div>

<div id="id-head">Bottom</div>
</body>
    HTML:
     
    Gayantha, Nov 4, 2009 IP
  6. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    <div class="center">
    <div class="thumb"><img src="/old_thumb.JPG" /></div>
    <div class="thumb"><img src="/new_thumb.JPG" /></div>
    </div>


    css:

    .center {
    text-align: center;
    }
    .thumb {
    text-align: center;
    padding: 7px;
    float: left;
    height: auto;
    min-width: 120px;
    font-size: 12px;
    }
    .thumb a:link {
    text-align: center;
    }
    .thumb a:visited {
    text-align: center;
    }
    .thumb a:hover {
    text-align: center;
    }
    a.thumb img {
    border: 1px solid #FFFFFF;
    }
    a.thumb img:visited {
    border: 1px solid #FFFFFF;
    }
    a.thumb img:hover {
    border: 2px solid #FF0000;
    }
     
    forextrendalerts, Nov 4, 2009 IP