Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Divs not showing up where expected
Avatar
Ted Klopp
Jedi
Members
Forum Posts: 85
Member Since:
May 29, 2013
sp_UserOfflineSmall Offline
1
November 13, 2014 - 1:40 pm
sp_Permalink sp_Print

Hi Rick,

On this page of my site:

http://www.westminstertech.com/beamz/

I am trying to display videos and then a horizontal line and a contact bar.

Here is the CSS for the "information" div:

.information{
width:100%;
height:30px;
background: #353535;
border-radius: 10px;
padding-top: 9px;
padding-bottom: 1px;
text-align: center;
font-family: Oswald;
font-size: 24px;
color: #ffffff;
}

For reasons I simply cannot figure out, the horizontal line and the black background of the "information" div are showing up at the top of the page instead of below the videos as I would like. I'm guessing this is some simple fix or bit of code I don't know yet or can't figure out. What do I need to do to get the horizontal line and the "information" div to appear below the videos?

Thanks!

Ted

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
November 14, 2014 - 2:41 pm
sp_Permalink sp_Print

This problem is called "div collapse".  It happens when a container contains floated elements that aren't eventually cleared.

The easiest fix is to add clear:both to your .information class.

The best thing to do is to wrap those videos in a self clearing div.  This is the "state of the art" fool proof method.

Avatar
Ted Klopp
Jedi
Members
Forum Posts: 85
Member Since:
May 29, 2013
sp_UserOfflineSmall Offline
3
November 15, 2014 - 9:43 am
sp_Permalink sp_Print

Hi Rick,

Thanks for the fix - worked perfectly. So should I add clear:both to every div class I create?

Also, with regard to divs... on the page, http://www.westminstertech.com.....s/ablenet/... I am using divs to display galleries on the left with corresponding text on the right. If the text isn't long enough to be as tall as the corresponding pic, the next div appears right after the text and slid to the right of the previous picture.

Is the proper way to fix this by declaring a min-height in each div?

Thanks!

Ted

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
4
November 15, 2014 - 5:22 pm
sp_Permalink sp_Print

No the proper thing is to learn how to float and clear floats.

There is a decent introduction here.  Although it does not address self clearing containers - which is current best practice.

Avatar
Ted Klopp
Jedi
Members
Forum Posts: 85
Member Since:
May 29, 2013
sp_UserOfflineSmall Offline
5
November 21, 2014 - 11:02 am
sp_Permalink sp_Print

Hi Rick,

I watched the video that you linked to and have tried creating containers in different ways, but still cannot get these divs to stack properly.

http://www.westminstertech.com.....s/ablenet/

I am (or at least I think I am) clearing the div with each pic in it right before I get to the text. What am I doing wrong?

Thanks!

Ted

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
6
November 21, 2014 - 12:15 pm
sp_Permalink sp_Print

Ted the div that wraps the floated elements needs a class and that class needs to be cleared.  Let's give it the class "fishsticks".

11-21-2014-12-10-20-PM.jpgImage Enlarger

 

The old method would be to write:

.fishsiticks{clear:both;}

The latest high tech Thesis method would be to make it self clearing like this:

:after{ 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
}
sp_PlupAttachments Attachments
Avatar
Ted Klopp
Jedi
Members
Forum Posts: 85
Member Since:
May 29, 2013
sp_UserOfflineSmall Offline
7
November 21, 2014 - 11:20 pm
sp_Permalink sp_Print

Hi Rick,

I put this code in using the BYOB Child Theme editor, but it still isn't quite right... I am using Genesis and noticed that the editor is adding "/" to the content portion of the div:

.fishsticks :after{
 content: \'.\';
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

Is that what the problem is? If so, how do I get remove those.

Thanks!

Ted 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
8
November 24, 2014 - 12:33 pm
sp_Permalink sp_Print

Ted, use double quotes instead of single quotes and see if that fixes it.

Avatar
Ted Klopp
Jedi
Members
Forum Posts: 85
Member Since:
May 29, 2013
sp_UserOfflineSmall Offline
9
November 24, 2014 - 12:42 pm
sp_Permalink sp_Print

:( No luck.

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
10
November 26, 2014 - 10:00 am
sp_Permalink sp_Print

Ok, I'll work on the plugin this weekend.

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
5 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1444

Brian Tozer: 1004

Carolin: 984

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:

saamkrish

volminFL

soundpilot

digitalaerolus

emma62755

sharonmarks

Forum Stats:

Groups: 8

Forums: 46

Topics: 7004

Posts: 34849

 

Member Stats:

Guest Posters: 6

Members: 6765

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent