Styling with CSS3: positioning floating divs on top of a non-floated div

Checkout this fiddle here: http://jsfiddle.net/PA5T5/1/

I've got a setup with 3 divs - 2 are floated whereas one is not. The two floating divs are positioned on top of the non-floating div. I'm wondering if this approach is correct or if it's supposed to work in this manner at all. It seems kind of unconventional - can you superimpose divs without resorting to absolute positioning like this?

#box1 {
    float:left;
    width:50%;
}
#box2 {
    float:left;
    width:50%;
}
#box3 {
    width:100%;
    height:300px;
    background:red;
}

Answer №1

To achieve a fixed position, you can use either the 'position: fixed;' property;

or add a 'margin-top' to elements that are floating.

#box1 {
    float:left;
    width:50%;
    background:cyan;
    margin-top: 18px;
}
#box2 {
    float:left;
    width:50%;
    background:pink;
    margin-top: 18px;
}
#box3 {
    width:100%;
    height:300px;
    background:red;
    margin-top: -25px
}

Check out an example here: http://jsfiddle.net/PA5T5/4/

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

Enhancing Your Website with Interactive Highlighting Tags

Looking at the following html: Let's see if we can <highlight data-id="10" data-comment="1"> focus on this part only </highlight> and ignore the rest My goal is to emphasize only the highlight section. I know how to emphasize a span ...

Clicking on the input triggers the appearance of a border using the OnClick function

I am currently developing my own website with a login feature that requires input tags of text-type. I would like to implement a functionality where clicking on these input tags will display a border, even when the mouse is not directly hovering over them. ...

Incorporating invisible surprises into a fixed menu that reveal themselves as you scroll

I am working on implementing a top navigation and a sticky sub-navigation feature. The goal is to have the sticky nav become the top nav when the user scrolls down the page, similar to the functionality on this website - The issue I'm facing is with ...

CSS login validator immobilized

In my Visual Studio project, I am facing an issue with applying CSS to two requiredfield validators. I have tried using the following code: #vdtrUserLogin { top:65px; left:750; position:absolute} #vdtrPasswordLogin0 { top:65px; left:900; position:absolute ...

Utilizing jQuery to apply a class to a targeted element when clicked

I'm currently working on animating a menu item where it expands to the left when hovered over, and contracts back when the mouse moves out. This part is functioning as expected. Additionally, I am trying to apply a specific color to the button by add ...

Having no capability to manipulate CSS using jquery

In one of my divs, the CSS is set to have display: none .cookie_policy { color: white; text-align: justify; width: 50%; margin: 2% 25%; line-height: 20px; display: block; font-family: Arial,Helvetica,sans-serif; font-style: italic; display:none; } <div ...

Add a focus style to the submit button input

Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused. Please review my code snippet and screenshot below. What could be causing this problem? CSS .search-form .search-f ...

What is the correct way to include viewport width in pixels using CSS?

My div is set to a width of 50vw with padding of 25px on all sides. I am looking to add a fixed element to the right of it by increasing its width by 50vw and adding 25px. Can this be achieved using only CSS, or should I consider using Less? If so, how c ...

tips for creating a mobile-friendly responsive button

I have been scouring the internet for a solution to this issue. Essentially, I am trying to position the button on the right side in desktop view. Here is an example: chrome view However, when the site is resized or viewed on mobile devices, the button sh ...

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

I need help figuring out how to automatically adjust the width of div 'one' and div 'three' to the screen side while keeping the width of div 'two' static using CSS. All three divs should be in the same row. Here is my HTML c ...

Make sure to keep "display:inline-block" in place while using fadeTo()

As a design student, I am working on creating a family tree website where users can click on individual circles (ancestors) to view their lineage. Everything has been functioning smoothly so far, except for when attempting to display the lineage of specifi ...

Tips for successfully implementing CSS animations in EmberHere are some helpful ways to

I am currently using the INSPINIA administrative theme and have a question that extends from a previous one regarding installing bootstrap 4 template on an Ember web project. My query is related to getting CSS animations to work properly in Ember. I am t ...

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

Include a prefix to each CSS selector in the imported CSS file

In my React project using create-react-app: index.js ... import "@mock/style/css/mock.css"; I am looking to modify all css selectors in the above file by adding a prefix. What is the most effective way to accomplish this task? Should I utilize ...

Displaying two dropdown menus with just a single coding component

Hey everyone, I'm having a problem with the dropdown list. I added an ASP dropdown list to a modal popup using a Bootstrap theme, but when the modal pops up, the dropdown list appears twice. Check out this image for reference: https://i.stack.imgur.co ...

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

After reducing the size of the table, the data spills over

Hey there, amazing individuals of the internet! Hope you're all doing well today. I've encountered a rather perplexing issue that's got me stumped. So, here's the situation - I have this table full of data and I want it to initially be ...