Transform page appearance using CSS exclusively, without altering DOM structure

I have a structure that must remain unchanged for various reasons. Here is the current layout:

<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>

I am looking to achieve this specific layout using CSS alone, without needing to use positioning or negative margins. The HTML elements (h1, p, and div) should retain their order in the flow. Is achieving this possible?

htmlcss

Answer №1

Try this out, it should do the trick. The key is to add float: left to the left-hand div.

<style type="text/css>
    #wrapper {
        width: 90%;   
    }
    #container {
        float: left;
        width: 200px;
        height: 150px;
        background-color: #666;   
        margin: 0 10px 10px 0;
    }
    H1 {
        font: bold 2em arial;
    }
    P {
        background-color: #ccc;  
    }
</style>

<div id="wrapper">
    <div id="container">#container</div>
    <h1>Heading</h1>

    <p>
        Some text.
    </p>
</div>

Check out this example on JSFiddle

Answer №2

Yes, you can achieve this using just CSS!

Although this question is from a while ago, it's still a fun challenge to tackle. One way to do it is by creating a pseudo element before the h1 that floats to the left and creates space for the container div.

I'm sure there are several other methods to accomplish this...

div {
  position:absolute;
  top:0;
}
h1::before {
  content:'';
  float:left;
  width:200px;
  height:200px;
  margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>

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

In Safari, the scrollbar appears on top of any overlays, popups, and modals

On my webpage, I have a div with the CSS property overflow-y: scroll. The page also features several popup modals and overlays. Strangely, the scrollbar of the div appears on top of these overlays instead of behind them. I attempted to resolve this issue b ...

javascripthtmlcsssafariscrollbar

When typed into the search bar input box, text becomes reversed

I've encountered an issue where text entered into a text field appears in reverse order. For instance, when I type " Hi how are you ", it displays as " UYO REA OH HI ". How can this be resolved? I am using the silent WP theme and have tried inspecting ...

javascriptjqueryhtmlcsswordpress

Can anyone recommend which browser compatibility is best suited for my Application?

I'm unsure if this question is relevant, but here goes... When creating an application, should I focus on browser compatibility for IE, Chrome, Firefox, Netscape, Opera, or something else? And if I choose IE, which version should I target - IE6 ...

javascriptasp.nethtml

Unable to resize images in Firefox

Why is it that resizing doesn't seem to work in Firefox but functions fine in Internet Explorer? I'm struggling to find a way to make it consistent across all browsers. My goal is to resize the width to 800 and height to 475, disable maximizing t ...

javascriptjqueryhtmlfirefox

The text input refreshes at regular intervals

Hey there, I've encountered an issue with a div that I reload every 15 seconds using PHP and Ajax. It's functioning properly, but I'd like to figure out if it's possible to prevent the input text from refreshing when the interval reload ...

javascriptphpjqueryhtmlajax

Automatically adjusting the image to fit the screen size

The image on the screen is not resizing properly. Please refer to the image with the alternate text google-play-badge. Even though the width and height of the image are set to auto, it is still not adjusting automatically. https://i.sstatic.net/Tu97S.jpg ...

htmlcssimageimage-resizingautoresize

What is the significance of keyframes in CSS animations at different percentages

I'm facing a challenge with the code below that is intended to make objects float from left to right in the background. However, once they go off-screen, a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I atte ...

csscss-animations

Learn the method for showing and hiding a div element in AngularJS

There is a loader on my screen that stays visible until the page finishes loading or encounters an error. Within a div, I have the loader... <div id:loader class="loading"> ...and I want to toggle its visibility based on the page loading status. ...

c#htmlangularjsmodel-view-controller

Hosting services and content management system for a website built with Twitter Bootstrap

Embarking on a new venture to create a website for a Custom Home Building company, I am eager to learn and grow in web development. Although I have some programming experience, please bear with me as I ask my newbie questions. I have been searching high a ...

csstwitter-bootstraptwitter-bootstrap-3

Display a single div and conceal the rest upon clicking a link

Trying to find a way to hide all other divs when clicking on a navbar link to toggle them. Currently, the divs stay active when a new link is clicked. The goal is for them to slide up and the clicked one to slide down. <script type="text/javascript> ...

jqueryhtmlcss

Is it possible for me to include additional fields in a vuetify calendar event?

Is there a method to incorporate additional fields, such as a description, in addition to the name and start/end time for an event on the v-calendar's day view? ...

javascriptcssvue.jsfrontendvuetify.js

Tips for transferring input data to a static HTML page

After successfully identifying a value in a table using jQuery, I am faced with the challenge of passing it to a static HTML page. How can this transition be achieved smoothly? $('.gobutton').bind('click', function(){ var value = $( ...

jquerydjangohtml

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

phpcss

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

When trying to convert relative image paths to absolute paths, there are numerous queries on stackoverflow addressing this issue. For example, take a look at this thread: MVC4 StyleBundle not resolving images This question recommends using new CssRewrite ...

cssasp.netasp.net-mvc-4bundlebundling-and-minification

Material-UI organizes its Grid Items vertically, creating a column layout rather than a horizontal row

I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet ...

javascriptcssreactjsflexboxmaterial-ui

What steps can I take to ensure my HTML5 mobile web app is optimized for compatibility across a variety of devices

I recently developed an HTML5 mobile web app and conducted tests on various devices including iPhones, iPads, Android phones, and tablets. What steps can I take to optimize the size and resolution of this app for seamless performance across all these dif ...

htmlhtml5-apps

Position the text of an h1 element next to its corresponding image in HTML5

I'm attempting to create a HEADER element with an H1 tag alongside a logo image. Here is the code snippet: Company name However, the issue is that "Some title" is not displaying correctly as it appears b ...

javascriptcsshtmlseo

Positioning the footer to sit at the bottom of my webpage, leaving a pleasing margin at the top

One technique I frequently use to ensure my footer stays at the bottom of my page is by utilizing an empty div. Here's how the code looks: <body> <div id="canevas"> <article>My website's content</article> ...

htmlcssfooter

Accessing the text content of the clicked element using vanilla JavaScript

Retrieve an item from the dropdown list and insert it into a button's value. function updateButton() { document.getElementById("ul").classList.toggle("show"); } var dropdown = document.getElementById('ul'); var items = ["HTML", "CSS", "Ja ...

javascripthtmlcss

Steps to bold a specific word within a div on react native

Hey there! I'm working with the code below: getDescription = () => { return( <div className="Description">{this.props.mytext + ': ' + this.name} </div> ) } Is it possible to bold only the specific te ...

cssreactjsreact-native