HTML CSS, how to create a Side bar or column


Tags: html,css

Problem :

i'm a bit of newbie to HTML and CSS, i'm currently working on a project from a given screenshot, and i hit a block. i'm not sure how i can divide the text to look the same as the model. when doing a side bar, it gives me a complete separate div. project link: http://postimg.org/image/no7gsn23z/ my so progress :( thanks for the replies, you guys All Rock! but i still have the same problem, could you point me to where i need to make the change? bellow are the screenshots:

so i tried your suggestions, but it kinda gave me the same issue: it added the side bar on a separate space, i'd like to have one content separate to two columns: bellow are the images for how it looks now for both issues the banner placement and the side bar:

sidebar http://postimg.org/image/4ts1bylfd/

my other issue is placing the last banner right bellow the main menu, but it always keep a white space: bellow is my coding so far:

<html>

<head>

<title> Welcome to Groundswell </title>
<link rel="stylesheet" type="text/css" href="mstyle.css" />
    <style>
        .position {position:absolute;right:200px; width:auto;top:80px;}
        .bannerpos {position: absolute;height:auto;width:auto;}
        body {background-image:url("page_background.jpg");padding: 70px;}
        div {background-color: white;}
        .ulmenu { list-style-type: none; display: inline;float: right}
        .limenu{float:left;margin:20px;display: inline;}
       .column{column-count: auto;
  column-gap:40px;
 column-rule:4px outset #ff00ff;
 }
 }
 }
        h2{color: brown;}
        h4,h1{color:gray;}
    </style>
 </head>

 <body>
<div id="outerDiv">

<div style="background-image: url(banner.jpg);" id="header">

<img src="banner.jpg" alt="Groundwell Logo" width=100% height=auto />

<div id="contactButton">

<img class="position" src="contact-off.png" alt="contact us"/>
</div>

 <div style="position: relative;bottom:70px;" id="mainMenu" >
       <ul class=ulmenu>
        <li class=limenu><a href=""> <img src="home-off.png"> </a></li>
        <li class=limenu><a href=""> <img src="gear-off.png"> </a></li>
        <li class=limenu><a href=""> <img src="lifestyle-off.png"> </a></li>
        <li class=limenu><a href=""> <img src="videos-off.png"> </a></li>
        </ul>
    </div> <!-- mainMenu -->

</div> <!-- header --> 

<div style=background-image: url(home_banner.jpg) ; >
              <img src="home_banner.jpg" alt="home banner" width=100% height=auto; />

</div>

<div id="content">

    <div id="mainContent">
<br>
 <br>
    <br>
        <br>
    <h1>Welcome to Groundswell</h1>
    <p>

  lifestyle, or watching some of the sickest video this side of the pipeline, we've    got you covered. On our site you'll find:
    </p>
    <ul>
<li>The latest gear</li>
<li>Surfing journals</li>
<li>Surfing photos</li>
<li>Competition videos</li>
<li>Surf condition reports</li>
<li>...and much more!</li>
    </ul>

    <p>So take off your sandals and wax your board up... you're here.</p>
    <h2>Latest News</h2>
<h4>.</h4>
    <p></p>

    <h4>Velosurty releases new board</h4>
    <p>!</p>

    <h4>Like the new look?</h4>
    <p>You may have noticed things look a little different here at Groundswell! We'll we decided it was time for a change and wanted a fresher look. </p>
    </div><!-- mainContent -->

   <span class=column>
        <h4>This month's surfer's journal</h4>
        <p>Josh Cambria pens this month's surfer journal. Check out his month-long   surfing experience as he surfs up the coast from San Diego up to Ventura. Along the way he meets several celebrities and finds a new favorite board.
    Check it out</p>
  </span> 


Solution :

This is code is in regards to the link: http://postimg.org/image/no7gsn23z/

 <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
        <style type="text/css">
        body {
        background-color: #ddd;
    }

    .navBar {
        margin-left: 25px;
        margin-right: 25px;
        background-color: #74BAE9;
        padding-bottom: 25px;
    }

        .navBar ul {
            list-style: none;
        }

        .navBar ul li {
            float: left;
        }

        .navBar ul li a {
            color: #000;
            margin-right: 15px;
        }

    .containter {
        width: 100%;
        height: auto;
    }

    .leftContent {
        margin-left: 15px;
        width: 50%;
        float: left;
    }

    .rightBar {
        margin-top: 10%;
        float: left;
        margin-left: 25%;
    }
        </style>
        <div  class="navBar">
                <ul>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
        </div>
            <div class="containter">

            <div class="leftContent">
                <h1>Header</h1>
                <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
                <ul>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </div>
            <div class="rightBar">
                <img src="#">
                <br>
                <h3>Some Header</h3>
                <p>Some text</p>
            </div>
            </div>
        </body>
    </html>

    CSS Howto..

    CSS: Formatting blocks. Strange height behaviour or how to adjust height by content inside th block

    How to reduce the gap between HTML5 video tag

    how to set css and html in textarea [closed]

    How to give a nested HTML table cell a transparent background?

    How to make font-size less for 2px than parent element?

    How can one use scroll bar images?

    How to vertically center image and text in a block element? [CSS]

    How to retain CSS transform scale on checked state

    how to overwrite RadWindow control CSS classes with mine?

    How to create custom buttons with arrows for twitter bootstrap?

    How to create this image using CSS?

    how to have a div with two images in any of 9 possible positions

    How to make an image behave like in Primefaces?

    How do I require main.css.erb in application.css

    How to change css style by using Unicode Hexadecimal

    HTML/CSS- how to align part of a cell to the left, and part to the right?

    How to properly center steps in bootstrap?

    How do I get the Twitter Widget to act as if any other element?

    PNG image showing up with white background even though it has a clear background

    How i change the dataTables_filter css class

    How do I strip a line of text or amount of words/characters from stored text with CSS/Javascript?

    How to make CSS hover effect persist after clicking Bootstrap button

    How to add Active states and icons in wordpress wp_nav_menu()

    How Do I Add product descriptions (short) to hover box in woocommerce?

    Ideas with how to draw a specific large amount of circles on a page using a loop

    how to change css of the image link when clicked?

    How can I make my web page load faster?

    How to put image on the top of the div?

    How to make floated right div fixed without changing the current look of the page

    How to write css for specific div selection like before after