CSS
make a two-column layout with float
#outer { width:100% } #column1 { float:left; width:50%; } #column1 { float:left; width:50%; } **If you place several floating elements after each other, they will float next to each other if there is room.
make a two-column layout with absolute positioning
#outter { position:relative; } #column1 { position:absolute; top:0; right:0; width:50%; } #column2 { position:absolute; top:0; left:0; width:50%; } **Be careful when using absolute positioning as elements are essentially removed from the document flow and can overlap other elements.
how to fix breakpoint?
@media only screen and (max-width : 860px) { //css code here }
what is a block element?
A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div>
_________ elements can overlap other elements.
Absolutely positioned
____________ elements are removed from the document flow. The document and other elements behave like this element does not exist.
Absolutely positioned
How to prevent crossbrowser compatibility issues when using the position property.
If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property: body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }
How do you solve a collapsed outer element when using absolute positioning inner element?
One solution is to set a fixed height on the elements. #outer { position:relative; height:250px; } ... But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.
how do you float div to center?
There is no float: center; in css. Use margin: 0 auto; instead. .div { margin: 0 auto; } Setting the left and right margins to auto specifies that they should split the available margin equally. **Note: You must set a width and remove float. **Note: Using margin:auto; will not work in IE8 and earlier, unless a !DOCTYPE is declared.
For columns with variable height, absolute positioning does not work. ________ can be a better solution.
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. http://www.w3schools.com/css/css_float.asp
to ensure that the image, after scaling with `cover` to fit the container, is centered in the element
background-position: center center;
when to use background-size: cover vs contain?
background-size: cover; will crop the image to ensure the entire div is covered by it. background-size: contain; Scale the image to the largest size such that both its width and its height can fit inside the content area html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
An absolute position element is positioned relative to the ______________ that has a position other than static. If no such element is found, the containing block is _________
first parent element <html>
how to change the font thickness?
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Elements are floated _______?
horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
header fixed height, and the content to fill up all the remaining height available on the screen, with overflow-y scroll.
html { height:100%; } body { min-height:100%; }
position text on top of an img (not background-image)
http://css-tricks.com/text-blocks-over-image/ HTML <div class=img> <img src"/path/img.jp"/> <p>text on top</p> </div> CSS .img { position: relative; width: 100%; } .img img{ width:100%; } .img p { color: #fff; position: absolute; top: 50%; left: 0px; width: 100%; font: bold 50px Helvetica, Sans-Serif; text-align: center; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; }
If we set absolute positioning on __________, we can move it according to its outer element that has is positioned ___________.
nested element, relative Example - position:relative + position:absolute: #outer { position:relative; } #inner { position:absolute; top:0; right:0; width:200px; }
how to contain content vertically when minimized for phone?
overflow-y: scroll; to limit to vertical scroll only
what to do when content is goes outside of the container when minimizing
overflow: auto; on the parent to expand based on the content.
There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") with Absolutely positioned element then the width will be based on the _________ instead of on the positioning element.
parent element
what is difference between the referencing div for position:absolute and position:fixed?
position - absolute, the reference div is the parent div that has a position - relative. position -fixed, the reference is the browser's window. In the case of IE6 you have to use CSS Expression
how to center something that has a position:absolute outer?
position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0;
When you specify __________, the element is REMOVED from the document and placed exactly where you tell it to go.
position:absolute example: #div-1a { position:absolute; top:0; right:0; width:200px; }
If you specify __________, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
position:relative example: #div-1 { position:relative; top:20px; left:-40px; }
how to align text to within an element?
set line-height to the height of containing element
how do you place a div below floating elements?
use clear:both #div { clear:both; }
display:none or visibility:hidden
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.
how to stop text from wrapping?
white-space: nowrap;
enable text to break into characters
word-wrap: break-word;
z-index only works on __________ elements ?
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
