Is there a way to use only CSS to create an article that includes a featured quote section starting around 50px from the top? The section should be half the width of the page with text wrapping around it at the top and bottom.
Currently, I am using the float solution but it places the section at the top of the text.
Check out this fiddle demo for reference
.inset-text {
display:block;
width: 50%;
float: left;
background: pink;
margin: 0 5% 2% 0;
}
How about trying a different approach with another div wrapper, along with some top padding and negative margin?
HTML
<div class="article-container">
<div class="inset-text">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="article-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis no...ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS
.article-container {
padding-top: 50px;
}
.inset-text {
/* display:block; */
width: 50%;
float: left;
background: pink;
/* margin: 0 5% 2% 0; */
margin-right: 2%;
}
.article-text {
margin-top: -50px;
}
/*
Because of the top padding set to the article-container the top margin of the first
p element does not collapse anymore. So just set the top margin to 0.
*/
.article-text p:first-child {
margin-top: 0;
}
Is it possible to provide support for browsers lacking flexbox compatibility (such as IE) while using SASS mixins? I have been quickly implementing the display:flex property with the following mixin. However, I am facing challenges with IE and need to man ...
I'm currently working on a Spring and Angular JS web application project. The structure of the project is as follows: app.state.js (function() { 'use strict'; angular .module('ftnApp') .config(stateConfig); stateConfig. ...
Looking for help with an input form in HTML that uses a combination of input and select boxes. My goal is to dynamically populate a select menu based on the data entered into the input boxes. For example: Employee One: Jim Employee Two: John Employee Thre ...
I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...
I am currently using CSS and div elements in an attempt to create these particular lines: https://i.stack.imgur.com/Ytowq.png .line { width: 1px; height: 100px; background-color: black; position: absolute; border-radius: 50%/100px 1 ...
I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...
While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upp ...
My task is to develop a Blackberry application, but I have limited knowledge in Java. Since the application requires drawing capabilities, I decided to use HTML5 and JavaScript instead. I started reading some JavaScript tutorials to prepare for this proj ...
Having one controller and two views presents a challenge. ClustersController angular.module('app.controllers').controller('ClustersController', [ '$scope', 'ClustersService', function($scope, ClustersService) { ...
Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...
Currently working on integrating the angular-2-dropdown-multiselect component: https://www.npmjs.com/package/angular-2-dropdown-multiselect The component functions correctly, but I am looking to adjust its width to fit the container... I believe simply ...
Currently, I have a code that functions by comparing two strings: str2 (which represents user input) and str1 (our reference string). The purpose is to determine whether any words in str2 are spelled correctly or incorrectly. So far, the code works well. H ...
Here's where the issue lies: This is the code I am referring to: <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'"> <div class="pb-1"> <md2-select plac ...
Can CSS be utilized to match an element's color with the default <a> color? If affirmative, what is the method? ...
I have a question that may seem unconventional - Is there a graceful method to replicate the functionality of an anchor tag when submitting a form? I want users to be able to hold down the control key while submitting a form and have the result open in a ...
I have a MySQL database filled with various records that I've displayed in an HTML table on a webpage. I want to add two buttons next to each record, both of which trigger PHP scripts. For example, let's say the table lists the names of three pe ...
I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized. #halvfjerds { width: 100%; height: 1050px; background-color ...
As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...
Looking to incorporate dynamic content from the server using ajax into a fancybox (iframe)? Check out this method that allows you to display the entire html page: index.html <html> <head> <link href="css/fancybox/jquery.fancybo ...
How can I toggle the page selectors in #pageList using a keyboard shortcut instead of clicking on the .togglePL button? I've tried looking up solutions online and asking questions here, but haven't found a working solution yet. Below is the code ...