PDA

View Full Version : Fluid Grid Layout


matthfam
05-28-2014, 08:34 PM
Help!
I am building a page with columns for information I will ad later. So I used Dreamweaver's Fluid Grid Layout to make columns as I didn't want to use tables. Worked great. I applied four columns and put in some dummy info to see how it worked on the browser.
Problem: Columns 1,2,4 work properly. Column 3 however shows the info way down the column.
Originally it worker perfect on Safari but not on the others (Firefox, Chrome, and Opera). Now, after I changed something, it doesn't work on Safari either.
Can anyone help me?:(

Ricky55
05-29-2014, 04:20 PM
We need to see your code mate otherwise its how long is a piece of string.

Post here or use http://codepen.io/

Cheers

Richard

matthfam
05-29-2014, 07:43 PM
Here is the code in the body:

<body>
<div class="gridContainer clearfix">
<div class="fluid image"><img src="images/boardroom-use.jpeg" alt=""/></div>
<p>
<nav id="mainNav" class="fluid"> <ul id="menuSystem" class="fluid fluidList">
<li class="fluid menuItem zeroMargin_desktop">Office</li><li class="fluid menuItem">Products</li>
<li class="fluid menuItem hide_mobile">List </li><li class="fluid menuItem hide_mobile">About</li>
<li class="fluid menuItem">Contact</li><li class="fluid menuItem">Terms</li></ul>
</nav>
</p>
<div class="fluid column1">
<p><strong>Office Supplies</strong><br>
Staples.ca<br>
another.ca
<br>
xxxy.ca<br>
quickprint.ca<br>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div class="fluid column4">
<p>This is the content for Layout Div Tag "column4" </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div class="fluid column2">
<p>This is the content for Layout Div Tag "column2"</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div class="fluid column3">
<p>This is the content for Layout Div Tag "column3"</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<footer id="Footer" class="fluid">This is the content for Layout Footer Tag "Footer"</footer>
</div>
</body>

edbr
05-30-2014, 04:04 AM
it more likely to be a css problem

edbr
05-30-2014, 04:09 AM
ah and dont name classes with a space in them
fluid column3 to fluid-column3
adding spaces the browser is accessing classes fluid and column3 not a single class