How about "Can I position two divs on the right side of the page

Question

How about "Can I position two divs on the right side of the page

After browsing through some StackOverflow threads and other sources, I'm still struggling to figure out how to float two divs to the right while aligning them vertically (with the "sign in" div on top).

Based on my findings, here are the key points:

1) Floating turns a div into a block-level element.

2) Multiple floats group together horizontally.

3) The Clear: both/right/left/etc property determines which elements should wrap around a floated element.

My main confusion lies in:

1) How can I stack differently floated elements above or below each other?

Here is the JSfiddle link for reference: http://jsfiddle.net/VUSKr/

html css

Answer 1

Answer №1

http://codepen.io/YTREg/9/

sign up and log in both aligned to the right side of the page.

#signup, #login {
    background: #ffffff;
    width: 200px;
    height: 120px;
    border-radius: 20px;
    float: right;
}

Ensure signup stays clear on the right side.

#signup{
    clear: right;
}

Answer 2

http://codepen.io/YTREg/9/

sign up and log in both aligned to the right side of the page.

#signup, #login {
    background: #ffffff;
    width: 200px;
    height: 120px;
    border-radius: 20px;
    float: right;
}

Ensure signup stays clear on the right side.

#signup{
    clear: right;
}

Answer 3

Answer №2

Make sure to properly clear floated elements when adding them to your layout. Adjust your CSS code as shown below:

 #header, #footer {
background: gray;
width: 300px;
height: 80px;
border-radius: 10px;
float:left;
clear:both;
}

SEE DEMO

Answer 4

Make sure to properly clear floated elements when adding them to your layout. Adjust your CSS code as shown below:

 #header, #footer {
background: gray;
width: 300px;
height: 80px;
border-radius: 10px;
float:left;
clear:both;
}

SEE DEMO

Answer 5

Answer №3

Include the following HTML code after closing #login:

<br style="clear:right;" />

Also, add this CSS code:

#login, #register {
    background-color: white;
    width: 200px;
    height: 120px;
    border-radius: 20px;
    float: right; /* make sure to include this */
}

Here is a jsfiddle link for reference: fiddle

For more information on clearing floats, check out this resource: clearing floats

Answer 6

Include the following HTML code after closing #login:

<br style="clear:right;" />

Also, add this CSS code:

#login, #register {
    background-color: white;
    width: 200px;
    height: 120px;
    border-radius: 20px;
    float: right; /* make sure to include this */
}

Here is a jsfiddle link for reference: fiddle

For more information on clearing floats, check out this resource: clearing floats

Answer 7

Answer №4

#access, #entry {
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  border-radius: 20px;
  display: inline-block;
  height: 120px !important;
  vertical-align: top;
  width: 200px;
}

Answer 8

#access, #entry {
  background-color: white;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  border-radius: 20px;
  display: inline-block;
  height: 120px !important;
  vertical-align: top;
  width: 200px;
}

Answer 9

Answer №5

When you use the float property on a block level element, it will start behaving like an inline-block element, causing them to bunch together.

To elegantly solve this issue, consider enclosing both elements in another div and applying the float property to that outer div instead. This way, you can move the elements without changing their display properties.

For example:

.moved {float: right;}

Feel free to check out the updated Fiddle for visual representation: http://jsfiddle.net/Y678K/2/

Answer 10

When you use the float property on a block level element, it will start behaving like an inline-block element, causing them to bunch together.

To elegantly solve this issue, consider enclosing both elements in another div and applying the float property to that outer div instead. This way, you can move the elements without changing their display properties.

For example:

.moved {float: right;}

Feel free to check out the updated Fiddle for visual representation: http://jsfiddle.net/Y678K/2/

Answer 11

Answer №6

To ensure that floating divs are not affected by other floating elements, incorporate a clear:both; or clear:right; in between the two divs. I've created a fiddle for you to visualize this: Check out how to float two divs to the right

Answer 12

To ensure that floating divs are not affected by other floating elements, incorporate a clear:both; or clear:right; in between the two divs. I've created a fiddle for you to visualize this: Check out how to float two divs to the right

How about "Can I position two divs on the right side of the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Problem with Layering in Javascript Canvas Game using Kinetic JS

Encountering a problem with React components displaying incorrect sizes while utilizing flexbox styling

Ways to link a Javascript or Jquery function to an HTML form

Ensuring form labels are properly aligned with input-group-prepend in Bootstrap

Arrange your grid system with Bootstrap Vue

Is there a way to lower just one border?

Determining if a component is nested within itself in Angular 6 is a crucial task

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Updating the background image of individual users in a Laravel blade template in real-time

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

JS causes the navigator to malfunction

Ways to prevent images from vanishing when the mouse is swiftly glided over them

Is there a way to do HTML select-option in a reversed order?

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I make a div as tall as the window?

Editify Angular Text:Note: The name 'Edit

I'm having trouble getting my HTML page to display appended text. What could be causing the issue?

The children elements in the Flexbox div are not lined up inline with the text

JavaScript enables the deletion of a class

"Enhance Your Table Design with Zebra Cells Using CSS in rich:data