Skip to main content
Date :

How To Create a Four Column Layout

 HTML

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>


CSS

.column {
  float: left;
  width: 25%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Responsive four column layout:

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Labels:

Comments

Post a Comment

Popular posts from this blog

Create a Header

Header Header My supercool header Create a Header Step 1) Add HTML: Example < div  class ="header" >    < h1 > Header < /h1 >    < p > My supercool header < /p > < /div Step 2) Add CSS: Style the header with a large padding, centered text, a specific background-color and a big sized text: Example .header  {   padding :  60px ;   text-align :  center ;   background :  #1abc9c ;   color :  white ;   font-size :  30px ; }
Post a Comment
Read more

View PC localhost on your mobile phone

Very Simple Method to see your localhost on your mobile phone.  Serve over your wifi via local IP This sounds complicated but its actually really easy. IMPORTANT: Make sure that your dev computer and your mobile device are connected to the same wifi network. Step 1: Serve to Localhost On your dev machine, serve your application in whatever way you usually do that serves it over a  localhost  address. Make sure to note what port number its being served on. In the image below, we’re noting  8080 . Once you are able to view your app locally on your computer via localhost, you can move to step 2. Step 2: Find your Local IP Address Open  System Preferences  >  Network . Select “Wifi” in the left pane if it isn’t already selected. Under “Status: Connected”, you should see “Wi-Fi is connected to <network name> and has the IP address < local IP address >.” Take note of that IP address! Note: It’s common for your Local IP Address to change automa...
Post a Comment
Read more

Code for Digital clock

Click here to see Digital Clock <!DOCTYPE html> <html> <head>   <title>Digital Clock</title> //Add following CSS    <style>     body {       font-family: sans-serif;     }     .clock {       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       font-size: 60px;       color: black;     }   </style> </head>
Post a Comment
Read more