Having trouble getting the float property and divs to cooperate effectively

Attempting to master the art of using div elements, I am currently working on aligning a website with the float property. However, it seems that things are not falling into place as expected. Would you mind taking a look at my code and offering some guidance? Thank you!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Walt Disney Concert Hall</title>
        <meta http-equiv = "Content-type" content = "text/html; charset=UTF-8" />
        <link rel = "stylesheet" type = "text/css" href = "style.css" />
    </head>
    <body>
        <div id = "container">
            <!-- HEADER -->
            <div id = "header">Walt Disney concert hall</div>
            <!-- MENU -->
            <div id = "menu">
                <a href = "home.html">Home</a>
                <a href = "familyprograms.html">Family programs</a>
                <a href = "visit.html">Visit</a>
                <a href = "tickets.html">Concert tickets</a>
            </div>
            <!-- TEXT -->
            <div id = "text">
                <h3>Holiday sing-along</h3>
                <p>End the year in song by bundling up and celebrating the sounds of the season 
                under the cool wintry skies. Sing-along with live musical accompaniment. Lyric 
                sheets are provided. No experience necessary.
                <p>FREE admission. Tickets are distributed beginning at 6:00 p.m., while supplies 
                last. One ticket per person to those waiting in line. Seating capacity is limited. 
                First come, first served.</p>
            </div>
            <!-- IMAGES -->
            <div id = "images">
                <img src = "6_1.jpg" alt = "Classical" />
                <img src = "6_2.jpg" alt = "Jazz" />
                <img src = "6_3.jpg" alt = "World" />
                <img src = "6_4.jpg" alt = "Pop" />
                <img src = "6_5.jpg" alt = "Family and others" />
            </div>
            <!-- VOTE AND EVENTS -->
            <div id = "voteandevents">
                <form method = "get" name = "form_mostliked" action = "send.php">
                    <fieldset>
                        <legend>Vote</legend>
                        What do you like the most?
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Ballet" checked = "checked" />
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Operett" />
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Opera" />
                        <br />
                        <input type = "radio" name = "radio_mostliked" value = "Other" />
                        <br />          
                        <input type = "submit" name = "btn_submit" value = "send" />

                        <h3>Upcoming events:</h3>
                        <ol>
                            <li>Spotlight awards</li>
                            <li>Grupo Corpo</li>
                            <li>Deneve conducts Debussy</li>
                            <li>Natalie Cole - JAZZ</li>
                        </ol>
                    </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

CSS

body{
    background: url("bg6.gif") repeat;
}

#container{
    width: 795px;   
    margin: auto;
    overflow: hidden;
    border: 5px dashed #000;
}

#header{
    background-image: url("header6.jpg");
    width: 800px;
    height: 150px;
    text-align: right;
}

#menu{
    float: left;
    height: 35px;
    width: 550px;
    background: url("cell-bg6.gif") repeat-x;

}

#text{
    width: 550px;   
    float: left;
    text-align: justify;
}

#text p {
    text-indent: 20px;
}

#images{
    float: left;
    height: 173px;
    background-color: #000;
    clear: left;
    padding: 7px;
    width: 550px;
}

#voteandevents{
    float: right;
    width: 200px;   
}

Answer №1

It is possible to relocate your #voteandevents right before your #menu without altering your CSS.

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

Guide to creating a CSS horizontal line with square elements on either side of a title

I am currently working on how to create a horizontal line with small squares on each side of an h1 title. I have managed to achieve the horizontal line using code from a similar question, but I am struggling to add the square elements to the design. https ...

Is the Bootstrap navigation bar collapse button visible on larger screens?

How can I make my Bootstrap navbar collapse button work on big screens the same way it does on mobile devices? <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Default</a> <button ...

Positioning the Tooltip at the Bottom

I'm a guitarist, not a programmer, but I am working on improving my guitar lesson website. (I apologize in advance if I make any mistakes posting the code below.) The issue I'm facing is related to tooltip positioning using HTML and CSS. If you h ...

Arranging Elements in the Navbar with Bootstrap 5

Working with Bootstrap-5, I've been experimenting with the new way to create a navigation bar and almost have it how I want. However, I'm struggling to align the last element to the right. Any suggestions? Here is what my current setup looks lik ...

When attempting to parse a JSON feed with jQuery and innerHTML, the data fails to display

Having trouble parsing a JSON feed using jQuery and innerHTML, but for some reason it's not working as expected. No errors are being displayed in the console and the feed itself is functioning properly. Not quite sure why this issue is occurring. < ...

Twitter Bootstrap 3.3.5 navigation menu with a drop-down feature aligned to the right

I've been attempting to position the drop-down menu all the way to the right, following the search input field and submit button. I've tried using pull-right and navbar-right classes without success. Is there a method to accomplish this? <na ...

Unable to choose the option from the modal that functions similarly to a drop-down menu

I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...

Performing addition operations on numbers entered through an HTML input field using PHP

I am looking to create a feature where the numbers entered in an input form are added together. I need to store these numbers in an array and have them display in a new line when a button is clicked. Here is the HTML code for the input field and button: ...

Monochrome Effect Triggered by Cursor Hover

I'm attempting to use Javascript with HTML5 canvas to convert an image to greyscale, but I seem to be missing something in my code. Can anyone spot the error? I feel like I'm very close! function grayscaleConversion(str) { // Access the Canv ...

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

The function is defined, but it cannot be set to null

Having trouble understanding this error message "Cannot set properties of null." I'm attempting to update the innerHTML with the output text from four functions that my button triggers. However, it seems to be stopping at the first function now even t ...

wrap <td> data in a link with vue depending on certain conditions

I'm trying to customize the display of a particular table cell td. I want to show the data in a link if a certain condition is met, and if not, just show the data as text. However, I'm encountering some difficulties in implementing this. I have ...

I am experiencing difficulty with the modal box not opening

I am attempting to create a CSS/HTML modal without using JavaScript. Below is the code snippet I have been working with. Despite indicating the link, the modal does not open as expected. I have included 3 CSS files, integrating them into bootstrap.css an ...

Matching Heights for Carousel Images

My image/video carousel is causing trouble as the content within doesn't maintain a consistent height. Clicking on the thumbnails highlights a mismatch in the main image heights. Is there a way to ensure that all elements have the same height while k ...

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

Zoomsounds: Injecting fresh content into div using data-source attribute

Currently, I am utilizing a javascript audio player called ZoomSounds. It generates circular play button divs and injects content into them using the following code: <div id="ap3" class="audioplayer-tobe skin-minimal" style="po ...

Having trouble retrieving alert message after submitting form using jquery

Trying to submit a form using jQuery, but when clicking on the submit button it displays a blank page. I understand that a blank page typically means the form has been submitted, but I want to show an alert() for testing purposes instead. However, it only ...

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value o ...

What is the reason border property does not transition effectively?

I am trying to remove the border property after a certain period of time (1 second) and make it smooth. Here is what I have attempted: var elem = $('div').css({'border-top':'6px solid #FC9A24', 'border-le ...

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in t ...