Solved

Help with two DIV columns that won't sit side-by-side when slideshow added

Posted on 2013-12-01
12
525 Views
Last Modified: 2013-12-04
I am using "responsive grid system" (http://www.responsivegridsystem.com) and am trying to get two DIVs to sit side-by-side. If I remove the content (tabs & slideshow)  from within the left column, the 2 DIVs fit correctly side-by-side.

However, with the slideshow, they do not. I've tried everything I know to do. I would greatly appreciate another set of eyes, and help.

I don't know if it's the jQuery that is doing this, or the CSS that goes with the tabs, or the CSS that belongs to the slideshow.

The tabs are a purchased product from CodeCanyon, and the slideshow is displaying within those tabs in an iFrame, because I couldn't get it to work just within the tabs without some conflict that I couldn't figure out. So, the iframe was the only way I could get this to work.

http://sitedesyne.com/WBCA2/homepage.html

Thank you so much!
0
Comment
Question by:Elizabeth2
  • 5
  • 4
  • 3
12 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39688693
Get rid of your inline styles to start.  From there, use just one grid width.  You have 11 so remove 10 of below.
	<link rel="stylesheet" href="css/2cols.css" media="all">
	<link rel="stylesheet" href="css/3cols.css" media="all">
	<link rel="stylesheet" href="css/4cols.css" media="all">
	<link rel="stylesheet" href="css/5cols.css" media="all">
	<link rel="stylesheet" href="css/6cols.css" media="all">
	<link rel="stylesheet" href="css/7cols.css" media="all">
	<link rel="stylesheet" href="css/8cols.css" media="all">
	<link rel="stylesheet" href="css/9cols.css" media="all">
	<link rel="stylesheet" href="css/10cols.css" media="all">
	<link rel="stylesheet" href="css/11cols.css" media="all">
	<link rel="stylesheet" href="css/12cols.css" media="all">

Open in new window


Then each of your columns should equal the total.  If you are using an 8 column grid then all of your columns need to equal 8.  Example two equal columns
<div class="4_of_8"></div> 
<div class="4_of_8"></div>

Open in new window

One column
<div class="8_of_8"></div> 

Open in new window

As I mentioned in  your other question, clean up your code by using the validator as well including stick with html5.
0
 
LVL 12

Accepted Solution

by:
Cyber-spy earned 500 total points
ID: 39688741
Inside the 'maincontent' div, you have the following hierarchy:
<div id="maincontent">
    <div class="section group">
        <div class="col span_4_of_6">
    </div>
    <div class="col span_2_of_6" style="background-color:transparent;margin-top:0; float:right;">
</div>

Open in new window

The 'group' class has the following styles:

.group:before, .group:after {
    content: "";
    display: table;
}

This style appears in two places: col.css (around line 13) and responsivegridsystem.css (around line 836).
If the 'content' style is removed in both places (I used Firebug to disable this style in the browser) then the second div moves up next to the first, where it should be

As this div (the one with the section and group classes) encloses another with responsive grid classes 'col' and  'span_4_of_6', I'd recommend removing this extra div entirely, so it looks like this:
<div id="maincontent">
    <div class="col span_4_of_6">
    <div class="col span_2_of_6" style="background-color:transparent;margin-top:0; float:right;">
</div>

Open in new window

0
 

Author Closing Comment

by:Elizabeth2
ID: 39688821
Thank you so much! I would have never figured that out ;-) Thank you for the quick answer too!
0
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 39688885
No problem.
For reference, if you install the extension Firebug in the Firefox browser, it's easy to turn styles off, or amend or add styles.
Although Chrome has a similar developer tool, Firebug is simpler to use and has more functionality. It can even be extended with more plugins.
If you are developing websites, particularly with complex CSS or JavaScript, it's a real lifesaver. It is best though to install it and play with it before you have a real problem so you know how to use it.

Have fun!

Adam
0
 

Author Comment

by:Elizabeth2
ID: 39688921
Hi Adam,

Now the page is still not displaying properly. do you have time to help?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39688991
>Now the page is still not displaying properly. do you have time to help?

Part of your issue is you have multiple gids.  Just use ONE.  Another issue you have is poorly formed html.  This will hinder your ability to get your expected output.

http://validator.w3.org/check?uri=http%3A%2F%2Fsitedesyne.com%2FWBCA2%2Fhomepage.html&charset=%28detect+automatically%29&doctype=Inline&group=0
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 12

Expert Comment

by:Cyber-spy
ID: 39689890
Elizabeth,

Does this happen when you add content to the 'CWB Online Mag' tab?
I can see your comment there about jQuery, but otherwise, the page still looks OK.
If you can add the content that breaks the page, then it would be possible to see what's going on.

One thing I did notice was that the 'section' class, used in the DIV around the left-hand panel has a 'clear: both;' style. I didn't mention it above as it didn't appear to break anything, but I'm surprised it doesn't - I expected it to be the cause of the original problem.
Try removing the line - it's at the top of col.css.

Padas's comments about broken HTML and using multiple grids is valid though - if you can remove any errors and simplify your grid layout, you may find the issue resolves itself.

However, if my suggestion nor Padas's comments fix it, you'll be better off asking a new question, as this will attract more people to look at it.

Regards

Adam
0
 

Author Comment

by:Elizabeth2
ID: 39693250
I did want to mention that the multiple grids are on purpose as far as I can tell. You have the choice to use multiple grids based on whatever column sizes you need for particular pages and sections. This is not several individual grid systems, it's one system broken down this way, as far as I can tell by reading the documentation.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39693301
As I pointed out http:Q_28307429.html#a39688693 you only need one.  From my example, if you choose to go with the 8 column grid and you want one column on a row, then use  <div class="8_of_8"></div>  If you want two columns on the next row then use,

<div class="4_of_8"></div>
<div class="4_of_8"></div>


or

<div class="6_of_8"></div>
<div class="2_of_8"></div>


or

<div class="3_of_8"></div>
<div class="5_of_8"></div>


Notice the first set of numbers always equals the last set (3+5=8, 6+2=8,4+4=8).
0
 

Author Comment

by:Elizabeth2
ID: 39695922
Okay, I understand now. Thank you. I was thinking that each grid file had different widths, but if you do the math, they are all the same. I'll try fixing that. I'm sorry I didn't understand before.
0
 

Author Comment

by:Elizabeth2
ID: 39696154
I finally got this to work using another method.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39696206
How did you do it
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now