In my code, I have two containers - one for the header and the other for the main body. Inside the header container, there is another div that has been floated to the left. As a result of this floating element, there is now a whitespace gap between the header and main body containers.
[Please see the styling for #DivLogo in the CSS section of the fiddle]
My question is: why does floating elements cause this issue?
This issue arises due to the fact that your #DivHeader is set to inline-block. Modify it to display: block and add overflow: hidden; to control the floats. Refer to http://jsfiddle.net/jhcUb/ for more details.
float:left;
on the element with ID #DivHeader to contain its children
position:relative;
from the element with ID #DivMain
Here is the original CSS code:
#DivHeader
{
position:relative;
display:inline-block;
width:100%;
font-family: Century Gothic, sans-serif;
background-color:#3b5998;
}
Within #DivHeader, there are two child elements - one floated and one absolutely positioned, which do not affect the height of #DivHeader.
If you were to set display: block, the red background would cover the header from the top left corner of the page, rendering the header invisible.
This behavior occurs because setting position: relative for #DivMain creates a new stacking context that overlaps previously rendered elements.
By changing position: static for
#DivMain</code, you would see the header content from the floated element.</p>
<p>With <code>display: inline-block#DivHeader, the element now acknowledges white space in the HTML document creating an anonymous inline box. This allows the clearance resulting from the float to contribute to the inline-block, displaying the background color accordingly.
To resolve this issue, simply add overflow: auto and display: block to DivHeader.
Additionally, if you had not floated #DivLogo, the larger font sizes in the logo elements would prevent the recognition of white space by the inline-block.
There are multiple factors at play here!
By simply including top: -5px; in the style of #DivMain, your issue will be resolved! :)
For a live demonstration, check out the fiddle here.
Take a look at http://jsfiddle.net/y6hSV/3/
HTML Code
<div id="DivHeader">
<div id="DivLogo">
<span class="Logo" id="SpLogo">Header</span><br/>
<span class="Logo" id="SpSlogan">{sub header}</span>
</div>
<div id="DivPrabhu">
<a href="http://google.com">Who?</a>
<a href="https://www.facebook.com">Connect</a>
<a href="#">Feedback/Bugs</a>
</div>
</div>
<div id="DivMain">
Some text to have layout
</div>
CSS Styling
html,body
{
margin:0;
padding:0;
}
#DivHeader
{
float: left;
width:100%;
font-family: Century Gothic, sans-serif;
background-color:#3b5998;
}
#DivLogo
{
position:relative;
float:left; /*please remove this property and run*/
padding-bottom:10px;
padding-top:10px
}
.Logo
{
margin-left:20px;
margin-right:20px;
color:#fff;
}
#SpLogo
{
font-size:35px;
font-weight:bold;
}
#SpSlogan
{
font-size:20px;
}
#DivPrabhu{
float: right;
margin-top: 30px;
font-size:13px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
#DivPrabhu a{
text-decoration:none;
color:#fff;
margin-left:15px;
}
#DivPrabhu a:hover{
text-decoration:underline;
}
#DivMain{
height:600px;
width; 100%;
background-color:red;
}
Is there a reason why the rows with the "odd" td class in this script do not toggle to blue like the rows without the "odd" class? EDIT: When you click on a row (tr), it is supposed to turn blue (.hltclick) and return to its original color when clicked ag ...
I have a popup feature implemented in JavaScript and all the necessary scripts added to my HTML page. I am attempting to load a PHP page in the popup when the submit button of my form is clicked. The popup is functioning correctly for buttons like the one ...
I'm working on a project that requires designing an HTML page with three tables containing images, along with a compare button. Initially, only two tables are visible upon page load, but when the user clicks the compare button, the third table should ...
I am currently working with bootstrap tabs, and I have four of them. My goal is to assign a different color to each tab, which should change when the user clicks on them. Bootstrap's "active" class doesn't seem to be effective in this case becaus ...
Is there a way to align the button with other components on the same line, positioned above them? https://i.sstatic.net/m5Abz.png <div className="row mb-12"> <div className="col-md-3"> <label htmlFor="noOfSubjects">No Of Subject ...
My form contains multiple 'email' input fields, each checked in mysql to verify if it exists in the database. The current setup correctly displays error messages for incorrect entries and also when all fields are left empty. However, there is an ...
As of now, material-ui's latest version does not provide support for aligning tabs to the left in the component. However, I came across a workaround on this GitHub page I have implemented the same workaround, and you can view it here: Unfortunately, ...
Having an issue with a particular style here. There's a div containing the string "Historic" that has a CSS transform rotate applied to it and is positioned in relation to another sibling div. When I change the string to "Historique" for international ...
I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...
I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...
Despite adding tabindex=0 to the close image button with <img src= "close img link" tabindex="0" alt= "close" title="close" aria-labelledby="close" />, I am unable to use the keyboard to access the bu ...
In my web page, I have a form to input times. The page is saved in flash memory and I want to update the times with previously stored values in EEPROM without loading the page into RAM. I prefer not to use websockets or AJAX for this purpose. I am looking ...
Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...
How can I make the alert below toggle after 2 seconds? <div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert">×</a> Data was saved. </div> ...
Within my MySQL database, there is a longblob field that stores a binary value representing an image uploaded through my website. I am currently attempting to retrieve the image using: <?php while($record = mysqli_fetch_assoc($result)): ?> <div&g ...
When it comes to optimizing images, Next.js offers an Image component that lazy loads images and includes a srcset for a particular image. However, there are instances where we need to serve different images based on the device being used (art redirection ...
How can I achieve a seamless shadow effect at the border-right of a small div that matches the shadow of a larger div, without cutting off at the border-bottom of the small div or the border-top of the large div? I am unable to use Z-index due to the compl ...
I have varying sizes of text that I would like to organize into 4 divs in the center of the page, similar to this image http://firepic.org/images/2015-08/22/0b0r536o40es.png However, it seems that my pink div is causing the ones below it to be pushed down ...
I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...
I have a lengthy list of products, each with its own form: <form action="index.php" method="post"> <input type="hidden" name="prodid" value="<?= $id ?>" /> ... </form> I am looking to navigate directly to a product upon tr ...