In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement.
Is there a cleaner way to achieve this layout without resorting to using position:absolute or other tricky hacks?
In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement.
Is there a cleaner way to achieve this layout without resorting to using position:absolute or other tricky hacks?
Include margin-top: -50px in the styling of the large div.
Alternatively, you could also encase the small divs within another div and then float that div. It all depends on the specific situation.
Using position: absolute and float: none are not seen as hacks but rather essential tools for a website developer :).
Avoid using fixed numbers for margins, especially negative ones. What happens if the design of your site changes or div sizes are adjusted in the future? You'll have to go back and update all those margins.
Check out this example: http://jsfiddle.net/pCGxe/10/
HTML
<div id="container">
<div id="div1and2">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div id="bigdiv"></div>
</div>
CSS
#div1and2 {
float: left;
}
I believe that absolute positioning is often misunderstood by developers and seen as a hack, when in reality it's just a matter of knowing how to use it properly - like a hidden CSS skill :P
Let me show you an example of how absolute positioning can be utilized to address a specific issue:
#container{
width:500px;
height:400px;
border:1px dashed black;
position:relative;
top:0px;
left:0px;
}
#div1{
width:50px;
height:50px;
background:red;
}
#div2{
width:50px;
height:100px;
background:yellow;
}
#bigdiv{
width:350px;
height:250px;
position:absolute;
left:50px;
top:0px;
background:blue;
}
In order for absolute positioning to function correctly, one of the ancestor elements of the absolutely positioned element (in this case #bigdiv) must have a non-static position. By default, elements are positioned statically, so setting #container to position:relative; allows us to position #bigdiv 50px from the left side of #container.
And just to clarify, using float:none is definitely not a shortcut or workaround :P
Cascading Style Sheets
#wrapper{
width:700px;
height:600px;
border:2px solid black;
}
#box1{
width:75px;
height:75px;
background:pink;
}
#box2{
width:75px;
height:150px;
float:left;
background:orange;
}
#largeBox{
width:450px;
height:350px;
float:right;
background:green;
margin-right: 100px;
}
HyperText Markup Language
<div id="wrapper">
<div id="largeBox"></div>
<div id="box1"></div>
<div id="box2"></div>
</div>
Why does the loading image not appear at the center bottom of the page in IE? This function loads content when the page is loaded and also loads content when scrolled to the bottom. When you load the page index.php, you will see the loading image at the ...
My HTML5 page has an issue where the image is taking over the background color of the entire page. I want to adjust it so that the image appears in the background, while the background color shows up behind the content on top. Check out my code below and l ...
Hello there, I'm currently working with Bootstrap 4 and trying to implement affix on the sidebar. I have set up three columns for the sidebar and made them fixed under certain conditions. However, I am facing an issue where the width of the sidebar ch ...
I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this ma ...
https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...
Currently, I am using Bootstrap 4 and I have set a light coloured .png image as the background for the navbar and body. The footer area has a dark background with off-white text colour. By default, the text colour is black to complement the light-coloured ...
I am currently working with a responsive container that contains one image. The container and image resize well when the window size changes. However, I now need multiple images to overlap each other (all of the same size). How can I achieve this using HTM ...
I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue? .parent{ border: 1px solid red; width: 50%; ...
I came across a wave particle animation on Codepen (https://codepen.io/kevinsturf/pen/ExLdPZ) that I want to use, but it has a white background. However, when I try to set the body background to red, it doesn't show up once the canvas is rendered. I ...
In my CRM Dynamics 2013 setup, I am faced with a unique challenge. I need to customize the Organization navigation bar based on which organization is currently loaded. Specifically, I have two organizations - QA and PROD. When a user switches to the QA org ...
The code provided below will constantly display the cursor's coordinates right below the cursor: function displayCursorCoordinates(e) { var x = event.clientX; var y = event.clientY; var coordinates = "(" + x + ", " + y + ")"; document.getEl ...
I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...
Within this designated div, I have included: https://i.stack.imgur.com/j099H.png In an attempt to ensure that the font size of the text adjusts responsively, I implemented the following code: font-size:calc(xx + 1.5vw); However, upon resizing the scree ...
As a total jQuery novice, I've been curious about the difference between these two types of text that appear when you hover over something. Can someone please clarify what each one is? Thank you very much. First hover text: When hovering over the up- ...
My current setup involves a popover that is not initializing properly. The code I am using is shown below: HTML: <div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div> JavaScript: $(function () { $('[data-t ...
I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...
Is there a way to achieve the combination of fixed and fluid width columns using Twitter Bootstrap alone, similar to this example? The HTML and CSS in the example make it seem simple. But can this be done solely with Bootstrap? ...
Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...
Having trouble making my list items (li) from the unordered list (ul) stretch across the page like the navigation bars on websites such as Verragio and James Allen. Can someone assist me with this? Here is a basic example of a nav hover bar. .dropdown-b ...
I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...