- Start with Fluid Grid Layouts in Dreamweaver CC
- Editing the Layout
- Float Fluid Elements Next to One Another
- Adding Non-Fluid Content
- Hiding Content from One of the Devices
- Final Thoughts
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Float Fluid Elements Next to One Another
Next, you’ll see how you can take fluid elements like lists, divs, and more, and float them next to each other easily. Because most navigation in mobile is a single column, you don’t want to float the list items next to each other in the Mobile view. We want the tablet and desktop layouts to float the list items, so you need to show the tablet view to start.
- Click the Tablet Size icon in the lower-right corner. Click the Design view button to hide the code.
- Insert the cursor in the first list item (mine is “products”), as shown in Figure 18. Click and drag the “Resize” widget on the right edge of the list item to the left (the little white square). Drag to the left until you see “2 columns” appear in the tooltip.
- Click the Move Up a Row button (the arrow) to float all of the list items (see Figure 19).
- With the cursor in the first list item (on the left, now since they are floated), click the Apply .zeroMargin_tablet icon to the left of the list item (see Figure 20). This removes the margin-left from the first list item.
- Click the Mobile Size icon in the lower-right corner, and notice that the floating and margin change hasn’t affected the design. Click the Desktop Size icon in the lower-right corner, and notice that the design hasn’t changed there, either.
- In the Desktop view, do the same thing to the list items, resizing one of them, then moving one of them up a row (to float them). Finally, remove the left margin on the first list item (see Figure 21).
)
Figure 18 Resize the list items
By dragging a fluid element from the right edge, you can resize it. Notice how all of the list items are resized. This is because they share the same style.
)
Figure 19 Move up a row
There is an issue, however. Notice that all of the list items have spacing on the left side. This is margin on the left. We need to get rid of it on the first list item so they all fit.
Next, you will adjust margin (spacing) between fluid elements like columns or list items that are floated.
)
Figure 20 Remove the margin on the left of the first list item
This can be sort of confusing, but certain properties of the fluid elements are only applied to the device view that is currently showing. When you apply formatting like background color, for instance, where you apply the property can affect other layouts. If you were to have the mobile view showing and add a color to the background of one of the divs, the tablet and desktop layouts would also have that color applied. But, if you were to have the desktop layout showing and apply a color to another div, it wouldn’t affect any of the other two layouts. It has to do with how the CSS file is structured and the media queries are applied.
)
Figure 21 Edit the Desktop list items