Set the alignment of the div to the right side (but not all the way to

I'm currently learning and attempting to create a layout with 4 divs that fits my desired page size, rather than adjusting based on the user's window size. My main struggle is getting the right div to align with the left div, without necessarily sticking to the right side of the user's window.

Here is the code I've been working with. Thank you for any assistance provided!

HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>all.about.me</title>
      <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
   </head>
   <body>
      <div id="header">
         <p>March 02, 2014
            <br><br>Hello.
            <br>
         </p>
      </div>
      <div id="left"> </div>
      </div>
      <div id="right">    </div>
      <div id="footer">
         </a>
      </div>
   </body>
</html>

CSS:

p
{
    font:10px verdana,sans-serif;
    color: white;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body
{
    background-color: red;
}

div {
    border-radius: 0px;
}

#header {
    height: 80px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
}

#footer {
    height: 35px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
    clear: both;
}


#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

#right {
    height: 385px;
    width: 300px;
    background-color: black;
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

I realize this may be a simple question and could potentially find the answer through Google, but I always appreciate the unique and creative solutions shared by fellow coders in this community. Thank you for your guidance!

csshtmlcss-floatright-align

Answer №2

Replace the float:left and float:right properties with display: inline-block for the left and right elements.

Check out the Fiddle here

You can alternatively apply float:left to the left element only, and remove float:right from the right element.

View updated Fiddle

#left {
   display: inline-block;
   height: 385px;
   width: 122px;
   background-color: black;
   //float: left;
   margin-right: 5px;
   margin-bottom: 5px;

}

#right {
   display: inline-block;    
   height: 385px;
   width: 300px;
   background-color: black;
   //float: right;
   margin-right: 5px;
   margin-bottom: 5px;

}

Answer №3

To achieve the layout you desire, simply enclose your elements in a div with the width specified for your page:

Check out this FIDDLE example

Here is the HTML structure:

<div id="wrap">
    <div id="header">
        <p>March 02, 2014
            <br/>
            <br/>Hello.
            <br/>
        </p>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="footer"></div>
</div>

And here is the accompanying CSS:

#wrap {
    width:600px;
}
p {
    font:10px verdana, sans-serif;
    color: white;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
body {
    background-color: red;
}
div {
    border-radius: 0px;
}
#header {
    height: 80px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
}
#footer {
    height: 35px;
    width: 600px;
    background-color: black;
    margin-bottom: 5px;
    clear: both;
}
#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}
#right {
    height: 385px;
    width: 300px;
    background-color: black;
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

Answer №4

There are a couple of important tasks for you to complete:

  1. Add a .container

    .container {width: 900px; margin: auto;}

    Make sure to place all your HTML content inside this container to ensure proper center alignment.

  2. Eliminate the use of floats. Remove any instances of float: left and float: right from your code pertaining to elements with IDs #left and #right.

Answer №5

If you're looking for a solution, you may want to experiment with this example.

#left {
    height: 385px;
    width: 122px;
    background-color: black;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

Answer №6

To ensure that your 'right div' (div#right) is connected to your 'left div' (div#left), you can achieve this by nesting div#right inside div#left, essentially making it a child element. It should then be positioned relative to its parent container, requiring the use of the position style set to relative for div#left.

Your CSS code should look like this:

CSS

div#left {
height: 385px;
width: 122px;
background-color: black;
display:block;
position:relative;
}

div#right {
height: 385px;
width: 300px;
background-color: black;
position: absolute;
left:100%;
top:0;
display:block;
}

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>all.about.me</title>
      <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
   </head>
   <body>
      <div id="header">
         <p>March 2<sup>nd</sup>, 2014
            <br /><br />Hello.
            <br />
         </p>
      </div>
      <div id="left">
        <div id="right"></div>
      </div>
      <div id="footer">
      </div>
   </body>
</html>

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

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set

I feel like I may be doing something incorrectly, but I can't quite pinpoint the issue. Any help or pointers would be greatly appreciated. My current setup involves Angular 10 and I have activated anchorScrolling in the app-routing.module file. const ...

cssangularangular-ui-router

Unable to assign an attribute to an HTML element without a value ('hidden')

In my quest to dynamically toggle the hidden attribute on certain HTML elements, I have come up with the following code snippet: <li><a href="#" onclick="SelectImage( 5 ); return false;">6</a></li> ... <a href="/image/5">< ...

javascriptjqueryhtml

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

html

How can we transfer parameters in JavaScript?

My vision may be a bit vague, but I'll try to explain it as best as I can. I want to implement multiple buttons that can toggle the visibility of a div (I have this functionality working already). Each button should carry two values (a number and a l ...

javascriptjqueryhtml

Button from Bootstrap extends beyond the page on mobile devices

I am facing an issue with my button. It looks great on desktop, but when I switch to the mobile version, it goes beyond the screen width like in the image below: https://i.sstatic.net/69Zbs.png 1) How can I prevent this from happening with the code provi ...

htmlcsstwitter-bootstrap

Tips for updating the search textbox placeholder in a multiselect feature

Is it possible to modify the placeholder of the search textbox in the multiselect? I am referring to the textarea that allows you to search for an item by name. (see attached image) It is located below the selected elements. https://i.sstatic.net/fYuVz.pn ...

jqueryhtmlcsskendo-uiplaceholder

Is it possible to set the <li> background to full width and center it vertically?

Getting straight to the point: I have a vertical menu bar and I am looking to have an <li> element with a full background color and vertical alignment. I came across a suggestion to add vertical-align: middle;, but that doesn't seem to work wel ...

htmlcss

Compatibility with various browsers for the style 'cursor:pointer'

While exploring, I stumbled upon some CSS attributes that can turn the cursor into a hand: For IE - style="cursor: hand;" For NS6/IE6 - style="cursor: pointer;" Cross Browser - style="cursor: pointer; cursor: hand;" Interestingly, I noticed that Stack O ...

css

Is there a way to access a large HTML file?

Currently, I have been utilizing a Python script to compare data and the resulting differences are saved in an HTML file. However, the size of the file has ballooned to 158 MB due to significant differences, making it impossible for me to open in any brows ...

htmlbrowser

Is there a way to align this button perfectly with the textboxes?

https://i.sstatic.net/ODkgE.png Is there a way to align the left side of the button with the textboxes in my form? I'm using bootstrap 3 for this. Here is the HTML code for my form. I can provide the CSS if needed. Thanks. h1 { font-size:83px; ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

Using JavaScript to inject PHP variables into multiple <span> elements

I have been searching for a similar query without any luck. Currently, I am attempting to display the number of Twitter/Facebook/RSS followers within a <span>....</span> in my sidebar. To retrieve the follower counts, I am using some PHP scrip ...

phpjqueryhtml

Checkboxes with dynamic functionalities are not being submitted in the form

I'm struggling with a div element that dynamically populates a list of checkboxes based on a selection from a drop-down list. Although the checkboxes are being populated correctly, the 'pl' parameter is not being successfully passed to the o ...

phpjqueryhtmlsqlforms

How can I retrieve information from a MySQL Table and display it on an HTML page?

Seeking Solution, I've experimented with Node.JS, but unfortunately, it does not seem suitable for webpage functionality. Online resources mostly discuss displaying HTML through Node.JS without mentioning SQL integration. My experience with PHP is l ...

javascriptphphtmlmysqlnode.js

Alteration in relational shift of division placement

My webpage is divided into three sections with the following proportions: 15% - 65% - 20% In the right section, there is a div with the ID alchemy. I want to set the height of this div using <div style="height:150px;">. However, when I set the heig ...

jquerycss

CSS - Incorporate the value of the counter() function as a property value

Is it possible to increment the margin-top of an element based on its index using a counter()? For example: div { margin-top: calc(counter(myCounter) * 10px); } I couldn't find any information on whether this is achievable or not. Since counters ...

css

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

javascripthtmlcsssweetalert

Issue with Angular JS: Unable to remove uploaded files

I'm currently learning about AngularJS and I've been working on uploading and deleting files. However, I've come across an issue with deleting files. Below is the HTML code: <div> <ul> <li ng-repeat="files in table.proce ...

jqueryhtmlangularjs

Position images on the right side of text within the container

I'm having trouble aligning the Facebook and Google+ icons on my website, which can be found here. These circular icons are located just below the navigation bar at the top of the page. The navigation bar is part of a class called 'container_head ...

htmlcssstylesheet

Using PHP to automatically suggest options when selecting elements from a MySQL table

My project involves creating a basic application for sending confirmation emails. I have a MySQL table that includes 4 columns: id, user_email, user_name, and user_track. The form on the app has a selectbox displaying all the stored user_email entries an ...

phphtmlmysql