Solved

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

Posted on 2013-12-01
12
512 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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 explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

707 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

18 Experts available now in Live!

Get 1:1 Help Now