Put text aligned to right & left

Question

HTML file:

<div id="home">
<b><p class="split-para">python<br><a href="pyt_temp.html" class="float">temperature converter in terminal</a>  <br>
<a href="pyt_palindrom.html" class="float">palindrome checker</a> <br> 
<a href="pyt_tkinter.html" class="float">gui for the temp converter</a> <br> 
<a href="pyt_cd.html" class="float">gui for the palindrome checker</a> 

<span>html5/css3/js/jquery/django <br>
 <a href="ass_eportfolio.html" class="float">eportfolio</a>  <br>
<a href="ass_js.html" class="float">datavalidation with javascript</a>  <br> 
<a href="ass_cd.html" class="float">implementing a given class diagram</a>  <br> 
<a href="ass_canvas.html" class="float">html5 + canvas</a>  <br> 
<a href="ass_interaction.html" class="float">html5 interaction</a></span></p> 
 </b></span></p>

CSS file:

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}

Do anybody have an answer to why the result comes out like this?

http://jsfiddle.net/u7SMD/

I've tried fixing this for an hour or so. I just want it on the same rows - with the python projects to the left and html5/css3 projects to the right next to each other.

Is there any other code that I can use for doing this or do anybody see a solution?

Thanks alot

Answer 1

Here is what you want: http://jsfiddle.net/u7SMD/1/

A few things I noticed:

1. Try not to mix the html with styles. Let html be the skeleton and let css do the styling!

2. 
   is not correct for line break. It is
   (as in my fiddle)

3. Get used to using divs, it is much easier to address using css than to have a do a 's job.

4. Keep a nice structure. It makes it much easier to read not just for others but also for you in months from now!

5. Good luck on you onward journey into the beautiful world of coding!

HTML

<div id="left" class="split-para">python <br/>
        <a href="pyt_temp.html" class="float">temperature converter in terminal</a><br />
        <a href="pyt_palindrom.html" class="float">palindrome checker</a> <br /> 
        <a href="pyt_tkinter.html" class="float">gui for the temp converter</a> <br /> 
        <a href="pyt_cd.html" class="float">gui for the palindrome checker</a> <br /></div>

<div id="right">html5/css3/js/jquery/django <br />
        <a href="ass_eportfolio.html" class="float">eportfolio</a>  <br />
        <a href="ass_js.html" class="float">datavalidation with javascript</a>  <br /> 
        <a href="ass_cd.html" class="float">implementing a given class diagram</a>  <br/> 
        <a href="ass_canvas.html" class="float">html5 + canvas</a>  <br/> 
        <a href="ass_interaction.html" class="float">html5 interaction</a>
</div>

CSS

#left { 
        float: left;        
        display:block;
        margin:10px;
}

#right { 
         display:block;
         float:right;
         width:50%;
         margin-left:10px;
}

Answer 2

see this Fiddle

<div id="home">
    <div class="left">
        <b><p class="split-para">python<br>
        <a href="pyt_temp.html" class="float">temperature converter in terminal</a>  <br>
        <a href="pyt_palindrom.html" class="float">palindrome checker</a> <br> 
        <a href="pyt_tkinter.html" class="float">gui for the temp converter</a> <br> 
        <a href="pyt_cd.html" class="float">gui for the palindrome checker</a>
        </p></b>
    </div>
    <div class="right">
        <b><p class="split-para">html5/css3/js/jquery/django <br>
        <a href="ass_eportfolio.html" class="float">eportfolio</a>  <br>
        <a href="ass_js.html" class="float">datavalidation with javascript</a>  <br> 
        <a href="ass_cd.html" class="float">implementing a given class diagram</a>  <br> 
        <a href="ass_canvas.html" class="float">html5 + canvas</a>  <br> 
        <a href="ass_interaction.html" class="float">html5 interaction</a>
        </p></b>
    </div>
</div>

css file:

.split-para{ display:block;width:50%}
.left{ float:left;}
.right{float:right;}

Answer 3

Output:

JSFiddle Link

HTML:

    <div class="right">
  html5/css3/js/jquery/django 
  <br>
  <a href="ass_eportfolio.html" class="float">
    eportfolio
  </a>

  <br>
  <a href="ass_js.html" class="float">
    datavalidation with javascript
  </a>

  <br>

  <a href="ass_cd.html" class="float">
    implementing a given class diagram
  </a>

  <br>

  <a href="ass_canvas.html" class="float">
    html5 + canvas
  </a>

  <br>

  <a href="ass_interaction.html" class="float">
    html5 interaction
  </a>
</div>

<div class="left">      
  python
  <br>
  <a href="pyt_temp.html" class="float">
    temperature converter in terminal
  </a>

  <br>

  <a href="pyt_palindrom.html" class="float">
    palindrome checker
  </a>

  <br>

  <a href="pyt_tkinter.html" class="float">
    gui for the temp converter
  </a>

  <br>

  <a href="pyt_cd.html" class="float">
    gui for the palindrome checker
  </a>
</div>

CSS:

.right{
    float:right;
    width:50%;
    margin-left:10px;
}

.left {
// no need for float:left in this context but u can add it
}