Jump to content

Divs lining up with each other


coldkill

Recommended Posts

Hey folks,

another problem has come up with a new site I'm developing. I'm trying to get two divs to be in line with each other, I've tried using display: inline; to no avail, in fact it came up with a lot of errors in both IE and FX.

 

Any ideas what I can do?

 

Cold

Link to comment
https://forums.phpfreaks.com/topic/116455-divs-lining-up-with-each-other/
Share on other sites

When I try to make two divs inline I do something like this (not tested). The basics are I set the width for both divs. I float the left (or right) div and use clear:both afterwards so nothing gets caught in the float. Works perfect everytime (with a bit o' tweaking of course).

 

<style type="text/css">
  #a {
    float:left;
    width:200px;
    background:green;
  }

  #b {
    width:200px;
    background:red;
  }

  .clear {
    clear:both;
  }
</style>

 

<html>
  <div id="a">left content</div>
  <div id="b">right content</div>
  <div class="clear"></div>
</html>

Ok, here's the code that is applicable:

 

<div id="content_wrap">
		<div id="providers">
			<div class="header">Powered By</div>
Images here
		</div>

		<div id="content">
Stuff here
		</div>
	</div>

 

#content_wrap
{
width: 900px;
padding: 10px 0px 10px 0px;
}

#content
{
width: 740px;
margin-left: 140px;
border: 1px solid #CCCCCC;
padding: 0px 10px 0px 10px;

}

.header
{
padding: 2px 0px 2px 0px;
background-image: url(images/header_background.jpg);
background-repeat: repeat-x;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}


/*
*	Providers
*/
#providers
{
width: 120px;
border: 1px solid #CCCCCC;
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.