Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse. Despite searching through W3C and Codecademy, I still haven't found a solution.

Here is the HTML:

    <!-- BACKGROUND -->
<body id = "background">

<!-- PASTICCERIA ITALIA -->
<!-- <a id = "logo" href = "home.html"> <img src = "images/logo.png"> </a> -->


<!-- NAVIGATION LINKS-->
<!-- <div id = "navibar">
    <nav>

        <a class = "navibar" href = "aboutthebakery.html"> ABOUT THE BAKERY </a>

        <a class = "navibar" href = "bakeryselection.html"> BAKERY SELECTION </a>

        <a class = "navibar" href = "viewthemenu.html"> VIEW THE MENU </a>

        <a class = "navibar" href = "visitalocation.html"> VISIT A LOCATION </a>

        <a class = "navibar" href = "http://example.com/--.html"> WEDDINGS & OCCASIONS </a>

        <a class = "navibar" href = "http://example.com/--.html"> CATERING 
        </a>

    </nav>
</div> -->

<h2 id = "about_heading"> ABOUT THE BAKERY </h2>    

<img id = "greenbar1" alt = "greenbar1" src = "images/greenbar1.png"> 

<div id = "about_paragraph">

    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor... </p>

</div> 

<img id = "greenbar2" alt = "greenbar2" src = "images/greenbar2.png">

<h3 id = "meet_heading"> MEET OUR TEAM </h3>

HERE IS THE CSS:

/* BACKGROUND */
#background {

    background-margin-top: 0%;
    background-margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-color: #fffee3;
}

#logo {
    margin-top: 0%;
    margin-right: 30%;
    margin-bottom: 0%;
    margin-left: 0%;
}

/* NAVIGATION */
nav {
    list-style: none;

    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
}

/* NAVIGATION DIV CONTAINING LINKS */
#navibar {
    text-align: center;

    margin-top: 3%;
    margin-right: 48%;
    margin-bottom: 0%;
    margin-left: 8%;
}

.navibar {
    display: block;

    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;

    padding-top: 2%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;

    color: #000000;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

.navibar:hover {
    color: #c92727;

    text-decoration: none;

    font-size: 12px;
    font-family: Verdana; 
}

/* ABOUT THE BAKERY */
#about_heading {
    text-align: center;

    font-family: Georgia;

    margin-top: 8%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 20%;
}

#greenbar1 {
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 50%;
}

#about_paragraph {
    text-align: justify;

    font-family: Verdana;
    font-size: 14px;

    margin-top: 0%;
    margin-right: 22%;
    margin-bottom: 0%;
    margin-left: 42%;

    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
}

#greenbar2 {
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 55%;
}

#meet_heading {
    text-align: center;

    font-family: Georgia;

    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 20%;
}
csshtmlhyperlink

Answer №1

For successful implementation:

1) Remove the margin-right and margin-bottom properties from #navibar. 2) Add a float: left to #navibar. 3) Enclose all content within the 'content' div as demonstrated below:

<div class="content">
<h2 id = "about_heading"> ABOUT THE BAKERY </h2>    
<img id = "greenbar1" alt = "greenbar1" src = "images/greenbar1.png"> 
<div id = "about_paragraph">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi... </p>
</div> 
<img id = "greenbar2" alt = "greenbar2" src = "images/greenbar2.png">
<h3 id = "meet_heading"> MEET OUR TEAM </h3>
</div>

4) Include the following CSS code:

.content {float: right;width: 70%;}

For updates: Visit the fiddle link here: http://jsfiddle.net/33bb7/

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

How to Align Two HTML Forms Using CSS

I've been experimenting with various methods, but I'm still unable to achieve the desired outcome. Currently, my setup looks like this: https://i.sstatic.net/fUXKr.png However, what I really want is something more like this: https://i.sstatic ...

htmlformscss

Is your dropdown menu malfunctioning with jQuery? (Chromium)

I am currently working on a website that requires the options in the second dropdown menu to change based on the selection made in the first dropdown menu. However, despite the fact that the browser is recognizing the javascript file, it doesn't seem ...

javascriptjqueryhtml

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when s ...

htmlcssangulartypescript

Is there a way to remove identical individual rows from the dataset?

Can someone help me? I am trying to display only the unique values of Barangay, specifically 'Talojongon', without any duplicates. Currently, my output looks like this: | Barangay | Disease | __________________________________ | Ta ...

phphtml

I'm using SASS in my project, can you provide guidance on customizing the UI with @aws-amplify/ui

I've recently taken over a Next.js (React) project from another developer and they've used .scss files (SASS) for styling. The specific project I'm working on can be found here https://github.com/codebushi/nextjs-starter-dimension My task n ...

cssreactjssassnext.jsaws-amplify

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

It appears that the onkeyup event is not triggered in IE8/IE9 (uncertain about 10) when the enter button is pressed in an input box, if a button element is present on the page. <html> <head> <script> function onku(id, e) { var keyC = ...

javascripthtmlinternet-explorer

`Custom transitions between sections using fullpage.js`

Has anyone used the fullpage.js extension to achieve an animation similar to this one, where sections are destroyed on scroll? ...

javascriptcssvue.jswebglfullpage.js

The accordion won't function properly if it is added using append() after the document is ready

I have implemented a button to add an accordion, but unfortunately it doesn't seem to be working properly. I am unsure of how to troubleshoot and resolve this issue. If the accordion HTML is appended after the document.ready() function, then the accor ...

jqueryhtmlcss

What could be the reason behind Flex making several images decrease in size?

I'm trying to set up a carousel of images with Tailwind CSS, where 5 identically sized images are displayed next to each other and can be scrolled left and right. When I imported the images without using Flex, they fit the max-width that I had specifi ...

htmlcssflexboxtailwind-css

Tracking progress with a dynamic bar from the beginning to the end

Struggling to develop a progress bar that corresponds to project start dates and end dates. With a roster of 100 projects, spanning from mid-2017 to future launches, the aim is to depict progress between 2018, 2019, and 2020. If a project commenced in 2017 ...

htmlangularjsprogress-barbootstrap-4

What is the method for importing .scss files throughout a Next.js application?

I'm looking to transform my React app into a Next.js app. In the current React setup, I have .scss CSS files being imported in various components. However, once I transfer the code to a Next.js environment, I encounter an error: Global CSS cannot be ...

cssreactjsnext.jssass

Efficiently running multiple PHP pages with just one simple click

Below is the code fragment that I currently have: <html> <script type="text/javascript"> function Run() {var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"]; window.location.href = "index.php?w1=" +a;} </script> <body> <input type="b ...

javascriptphphtml

Exploring Partial Views in Bootstrap Single Page View and AngularJS

Currently, I am utilizing Bootstrap's single page view design, specifically the one found at this link: http://www.bootply.com/85746. As my code in the view has grown to nearly 500 lines and is expected to expand further, I am seeking a method to crea ...

htmlangularjstwitter-bootstrap

A guide to integrating Tailwind UI animations into pure HTML and JavaScript

I am struggling to implement the animation part of tailwindui.com components that I want to use. The instructions are provided in the comments, but I'm having trouble integrating them into my code. I prefer not to rely on any frameworks or libraries a ...

htmlcsscss-animationstailwind-csstailwind-ui

Is there a way for me to adjust the window's placement?

Currently utilizing Jquery to launch a new Telerik window, as shown below: var win = $('#myWindow').data('tWindow'); win.open(); With the knowledge of the mouse position (x,y), my goal is to initiate the window at that exact location. ...

jqueryhtmlasp.net-mvc-3telerik

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

I have developed a simple jQuery plugin and uploaded it to Github. I am using both the Github website and Github for Windows to manage this project. However, when I try to include the .js or .css files from Github using the Raw links, my browser fails due ...

javascriptjquerycssgithubgithub-for-windows

Organizing content into individual Div containers with the help of AngularJS

As someone who is new to the world of AngularJS, I am currently in the process of learning the basics. My goal is to organize a JSON file into 4 or 5 separate parent divs based on a value within the JSON data, and then populate these divs with the correspo ...

javascriptjqueryhtmlangularjs

Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've wo ...

htmlcssfluid-layout

What steps should be taken to refresh a page following an AJAX file upload?

I need some help creating a progress bar to track file uploads on my website. Here's what I have so far: HTML: <form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload"> <input type="file" name="upfile" ...

javascripthtmlajaxupload

Just a snippet of a webpage shown

My website focuses on online magazines. I'm looking for a way to selectively display specific parts of articles that are in regular HTML format with a global CSS stylesheet applied. There are no images, only text. How can I extract certain segments of ...

htmlcssiframe