having a hard time aligning two divs next to each other

[irenaeide]

Hey There,

I changed some coding on my bc site, and the two divs in the main content area is now stacked on top of eachother instead of directly next to eachother. Also the right side column is now all the way below the main content div on the left side, instead of showing at the top of the right side div.

You can see what it looks like at: http://littlefolkies.businesscatalyst.com/

The column on the top left inside the white square with rounded corners is in the right spot, but the text below with the title: 'what folks say about little folkies' is supposed to be next to the div on the left at the same level also showing inside the white square with rounded corners.

I have a feeling the two issues are related to the following coding (see code pasted below), but I can't figure out what the specific problem is:

Would really appreciate any help with this!

Thank you so much,

I

.main .sidebar {

  display: inline;

  float: left;

  width: 200px;

  margin: 0 5px;

}

.main .content {

  display: inline;

  float: left;

  width: 710px;

  margin: 0 -5px;

}

.content-columns {

  display: inline-block;

  width: 710px;

  margin: 0 5px;

  margin-bottom: 10px;

}

.content-columns .content-column {

      display: inline;

  float: left;

  width: 300px;

  margin: 0 5px;

}

[Chad_-_BCGurus_com · Accepted solution]

Hello irenaeide,

Looks like you have a min-width of 200px on the this class(line 249):

.content-columns {

    margin-top: 14px;

    max-width: 200px;

    padding: 0;

}

Remove that and the columns will float.

As for the sidebar I don't see the css you have shown here applied to the page.

Hope this helps,

Chad Smith - BC Gurus

[irenaeide]

Thank you! That worked.

As I mentioned, I'm looking to move the news, newsletter and member login side bar to the top right.

Is the code pasted below relevant?

Thanks so much,

I

_____________________________________________________________________________________

/* ----------------------- CONTENT ZONE CSS ------------------------------ */

.main_bg {

    background-color:#ffffff;

    background: url(../images/littlefolkiesbackground1.jpg) repeat;

}

.main {

    min-height:500px;

    padding-top:200px;

}

/* Main content area CSS */

.main .content {

        max-height:600px;

    background: url(../images/lfboxbackgroundbig.jpg) no-repeat;

    padding-top:70px;

    padding-left:45px;

}

.content-columns {

    margin-top:14px;

    padding:0px;

}

.content-column form {

    padding-left:5px;

}

.content-column form input[type=text],

.content-column form textarea,

.content-column form input[type=password] {

    width:200px;

    margin-bottom:5px;

}

/* Sidebar CSS */

.main .sidebar {

    padding:10px 0;

    min-height:800px;

}

.sidebar hr {

    margin: 20px 0;

}

.sidebar h3 {

    font-family:Arial, Helvetica, sans-serif;

}

/* Sidebar forms CSS */

.sidebar form {

    padding-top:10px;

}

.sidebar form input[type=text],

.sidebar form input[type=password] {

    width:200px;

    margin-bottom:5px;

}

.sidebar label,

.sidebar input[type="submit"] {

    display:block;

    margin-top:5px;

}

_____________________________________________________________________________________

@import '/StyleSheets/common.css';

body {

  width: 100%;

  background-color:ffffff;

  float: center;

}

.center {

  margin: 0 auto;

  width: 960px;

}

.header, .main, .footer {

  margin: 0 auto;

  width: 960px;

}

.header .search {

  display: inline;

  float: left;

  width: 230px;

  margin: 0 5px;

}

.header .logo {

  display: inline;

  float: left;

  width: 170px;

  margin: 0 5px;

}

.header .menu {

  display: inline;

  float: left;

  width: 960px;

  margin: 0 5px;

}

.pressedButton {

border: black; color:#000000;

font-family:Arial,Verdana;

font-size:9pt;

padding:0px;

text-align:center;

text-decoration:none;

}

.main .sidebar {

  display: inline;

  float: left;

  width: 200px;

  margin: 0 5px;

}

.main .content {

  display: inline;

  float: left;

  width: 750px;

  margin: 0 -5px;

}

.content-columns {

  display: inline-block;

  width: 710px;

  margin: 0 5px;

  margin-bottom: 10px;

}

.content-columns .content-column {

      display: inline;

   float: left;

  width: 300px;

  margin: 0 5px;

}

[Chad_-_BCGurus_com]

It would be better to just update your code so I can see it live. I didn't really go through all of this css.

From the looks of your code from your link, the sidebar div is outside the main div. So once you put the sidebar div within the main div you just need to adjust the widths of those divs for the sidebar to fit

Should look like the image here.

And from what firebug tells us. the .main .container needs a width of 668,

and .sidebar width should be 228.

Hope this helps,

Chad Smith - BC Gurus