it is you first web page

My Web

This visual guide will walk you through important responsive web design concepts and how to implement them visually inside Webflow. 

#4 Layout with CSS

Building web layouts with CSS

Similar to adding style to an element, to change the position of an element first add a class and then edit the position properties. You’ll learn about Margin, Padding, Display, Float, Overflow, and Position. 

Margin & Padding example
Breaking News

Federal Agents Raid Gunshop, Find Weapons

Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

Description: Margin and padding can be found in the Position palette of the Style panel. Adding Margin will add space outside of a block, and adding Padding will add space inside of a block.
Add spacing Yourself
Breaking News

Federal Agents Raid Gunshop, Find Weapons

Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

TIP: Start by adding padding on all sides of the main grey block (parent element). Then add bottom margin to add spacing between the individual text elements (children elements). Hint: Hold SHIFT while using the margin/padding control to apply to all sides and ALT to also apply to the opposing side.
‘Display: Block’ examples

This heading is set to Display: Block

This paragraph is set to Display: Block. So it fills the width of the parent window and stacks on top of other blocks. 

Button with Display: BlockButton with Display: BlockThis link is set to Display: BlockThis link is set to Display: Block
Description: Setting elements’ Display Setting to Block will make them stack on top of each other and fill 100% the width of its parent block. Most elements actually have this setting by default. 
Make them ’Display:Block’ yourself
This is a ButtonThis is a ButtonLinks are Display: Inline by defaultLinks are Display: Inline by default
TIP: Select these elements (some are Inline Block and some are Inline) and make them Display: Block so that they stack on top of each other. 
‘Display: inline-block’ example
DownloadEditDelete
Description: Setting elements’ Display Setting to Inline-Block will make the width of the block conform to the width of the contents inside it. That means if their content is small enough they can stack next to each other. You can copy paste the buttons above and edit the text inside to see how it works.
make them inline-block yourself
DownloadEdit
TIP: Select the elements above and make them Display: Inline-block so they stack next to each other. You’ll see that the images stack next to the buttons. Tip: Dropping the buttons and images into separate Div Blocks will make them stack on top of each other (because Div Blocks are Display: Block by default).
Float example

Join Our Newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Description: Setting Display: Inline-Block or Floating (this example) are the most common ways to stack elements side by side. In this example I’ll show you how to float something. 
Float it yourself

Join Our Newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

TIP: First select the text field, make it Float: Left and give it a percentage width (ex: 60%). Then set the button to Float: Left as well and set another percentage width (ex: 40%) so they both add up to 100%. That’s a manual way to force any element to stack side by side. 
Absolute Position Example

My Cup of Joe

This is a photo caption text.

Featured
Description: If you set Position to Absolute on an element, you’ll be able to position it in anywhere inside its parent block. To choose which parent to position inside of, set the parent element’s Position to Relative. Note: When elements are absolute positioned they float above other elements.
Style It Yourself

My Cup of Joe

This is a photo caption for my favorite cup of Joe.

Featured
TIP: First select the Image Wrapper element and set its Position to Relative. Next select the caption, drag it into the image set it’s Position to Absolute and choose the 7th preset. To position the Featured badge into the correct place choose the 2nd preset and manually position it.