Align text to the right and left side

HTML file: 

<div id="home">
<b><p class="split-para">java<br><a href="j_temp.html" class="float">temperature converter in terminal</a>  <br>
<a href="j_palindrom.html" class="float">palindrome checker</a> <br> 
<a href="j_tkinter.html" class="float">gui for the temp converter</a> <br> 
<a href="j_cd.html" class="float">gui for the palindrome checker</a> 

<span>java/css3/js/jquery/springboot <br>
 <a href="ass_sportfolio.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">java + canvas</a>  <br> 
<a href="ass_interaction.html" class="float">java 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;}

Any thoughts on why the outcome looks like this?

http://jsfiddle.net/u7SMD/

I've been trying to resolve this issue for quite some time now. I simply want the python projects on the left and html5/css3 projects on the right to be on the same row next to each other.

Are there any other code snippets that could help with this or does anyone have a solution in mind?

Thank you very much

htmlcsstextalignment

Answer №1

If you're looking for it, here's the link you need: http://jsfiddle.net/u7SMD/1/

After carefully reviewing your code, here are a few observations:

  1. It's best practice to separate HTML from styling. HTML should serve as the structure, while CSS handles the design.

  2. For line breaks, remember to use
    instead of
    .

  3. Utilize divs for better CSS targeting, rather than overloading the responsibilities of other elements.

  4. Maintain a clean structure for improved readability, both for yourself and others in the future.

  5. Wishing you all the best on your coding journey!

Snippet of 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 Styling:

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

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

Answer №2

check out 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

Here is the 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
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

htmlcssreactjssass

javascript passing a window object as an argument to a function

In Slider function, I am passing a window object that does not contain the body element. Additionally, my code only functions correctly on mobile screens. While debugging the code below: console.log(windows.document); If (!mySlider) {console.log(windows. ...

javascripthtml

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

javascripthtmlcssangulartypescript

Include a name in the set_values function using Rvest

I'm currently working on scraping data from this website. I have a code written in rvest for login, but each time the page refreshes, the form name changes. library(rvest) loginpage <- "https://demo.glpi-project.org/" pagesession <- html_sess ...

htmlrweb-scrapingrvest

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

What is the parent selector in cascading style sheets (CSS

Is there a way to use pure CSS to identify the parent selector of a child element? #checkbox{ width: 24px; height: 24px; vertical-align: middle; } #checkbox:checked (parentName){ color: red; } <label for="checkbox"> <input type="check ...

jqueryhtmlcssselector

The Bootstrap navbar collapses and vanishes instantly

Whenever I tap on the navbar icon on my mobile or tablet, the navbar opens briefly before disappearing. Even though the navbar closes visually, it still indicates that it is open. When I tap the navbar icon again to close it (without seeing it actually clo ...

htmltwitter-bootstrapcss

Is it possible to programmatically bind a click event to each individual word in a div element?

I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...

javascriptjqueryhtml

The window.open function is returning a null value after attempting to open the specified

Is there a way to prevent users from opening more than one IFrame window for my application? I have included the following code: <html> <head> <title>Testing Window Opening Limitation</title> <meta http-equiv="Content-Type" cont ...

javascriptjqueryhtml

Rotating an image as it approaches the footer: a step-by-step guide

I'm trying to add a navigation arrow on my website that will rotate to point to the top when it reaches the footer. When clicked on, it should scroll back up to the top. The arrow already has a scrolling effect, but I need help figuring out how to m ...

javascripthtmlcss

explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo. I attempted to achieve this by setting the position of the inner elements to ...

javascriptjqueryhtmlcsstabs

Is there a way to have just the data table automatically update every 2 minutes without affecting the rest of the

I'm working on a project where I need to create an inbox mail that automatically refreshes every 2 minutes to display any new mail in the table. Can anyone help me with refreshing my datatable? ...

htmlruby-on-rails-4datatables-1.10

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

javascripthtmlangular

Tips for customizing MUI PaperProps using styled components

I am trying to customize the width of the menu using styled components in MUI. Initially, I attempted the following: const StyledMenu = styled(Menu)` && { width: 100%; } `; However, this did not have any effect. After further research, I ...

javascriptcssreactjsmaterial-ui

Solve the issue with the horizontal scrollbar in Internet Explorer 7

The appearance of a horizontal scroll on this site in ie7 is quite puzzling. It functions perfectly in all other browsers, so I'm at a loss as to why this issue specifically arises in Internet Explorer 7. Any help in solving this problem would be grea ...

htmlcssinternet-explorer-7

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4

Building a Dynamic Web App with PHP and Vue.js

I developed an API using PHP and you can access it through this link: However, I encountered an issue when trying to display the data on the front-end of my Vue.js (Home.vue) file using axios. Below is the code I used: <ul class="ta-track-list" v-if= ...

javascriptphphtmlvue.js

html Tips for referencing a file in an input tag

Imagine you have a basic form with an <input type="file"> tag. What I aim to achieve is, once the user selects a file (which is an image), I want to display that file on the same page for viewing - providing a better user experience. I attempted to ...

jqueryhtml

Steps for inserting an image:

Looking for help adding a static header image to a simple HTML page that contains two div tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"> <html> <head> ...

jqueryhtml

A step-by-step guide on revealing a complete div upon selection

Can anyone assist me in showing a div with a form inside it whenever a specific option is selected from a tag? Here is the code I currently have: <script type="text/javascript"> $(function() { $('#contactOptionSelect&apo ...

javascriptjqueryhtml