Combining Float and Margin for Effective Web Design

Is there a way to eliminate the excess space between "Top content" and "Left content"?

I am aiming to have Left and Right aligned at the same level.

I prefer not to sacrifice the equal margin for all these sections.

STATIC IMAGE

HTML

<div class="top">Top content</div>
<div class="left">Left content</div>
<div class="right">Right content</div>

CSS

.top
{
    margin: 3%;
    background: red;
}

.left
{
    margin: 3%;
    float: left;
    width: 50%;
    background: yellow;
}

.right
{
    margin: 3%;
    overflow: hidden;
    background: green;
}

LIVE DEMO

http://jsfiddle.net/yF6MX/20/

BEST SOLUTION SO FAR

http://jsfiddle.net/yF6MX/14/

If we could maintain the same margin as Top content, this solution would be ideal.

htmlcssoverflowmargin

Answer №1

Here is the solution that fits your needs:

.top
{
    border: 1px solid #ccc;
    background: red;
    margin-left:10px;
    margin-right:10px;

}

.left
{
    float: left;
    width: 50%;
    background: yellow;
    margin: 10px;
}

.right
{  
    background: green;
    margin: 10px;
    overflow: hidden;
}

You were on the right track, but in the .top section, using "margin:10px" added a margin to your left block. Instead, apply margins separately to the left and right blocks.

Answer №3

utilize this

UPDATE http://jsfiddle.net/yF6MX/15/

    .top
{
    border: 1px solid #ccc;
    background: red;
    margin: 10px;
    margin-bottom: 0px;
}

.left
{
    float: left;
    width: 47%;
    background: yellow;
    margin: 2%;
}

.right
{  
    background: green;
    margin: 2% 2% 2% 0;
    overflow: hidden;
    float: right;
    width: 47%;
}

Answer №4

In my opinion, incorporating a container with surrounding padding would be beneficial:

<div class="container">
    <div class="top">Top content</div>
    <div class="left">Left content</div>
    <div class="right">Right content</div>
</div>

Next, eliminate other margin properties and allocate margin-bottom to .top and margin-right to .left, while introducing the new CSS for .container:

.container {
    padding: 10px;
}

.top {
    border: 1px solid #ccc;
    background: red;
    margin-bottom: 10px;
}

.left {
    float: left;
    width: 50%;
    background: #FF0;
    margin-right: 10px;
}

.right {
    background: green;
    overflow: hidden;
}

VIEW DEMO

I hope this advice proves helpful.

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

Adaptable layout - transitioning from a two-column design to a single-column layout

I'm facing an issue with two divs that are floated left to appear inline <div class==".container" style="width: 100%"> <div class="leftColumn" style="width: 50%; float:left"> test </div> <div class="rightColu ...

htmlcssresponsive-design

Php: Form data vanishes upon refreshing the page

Hey there! I'm a beginner in the world of PHP and currently working on developing a multi-page form. However, I am facing an issue where the entered data disappears as soon as the page is refreshed. Below is the code snippet that I have been trying to ...

phphtml

Arranging Data in an HTML Table Using TableSorter

I have been trying to incorporate sortable columns into my HTML table and decided to experiment with the jquery tablesorter. I have followed the syntax below, but for some reason, my table is not allowing me to sort. Can you help me understand why? &l ...

phpjqueryhtmltablesorter

Is there a way to sort the columns of my table based on a specific keyword?

Currently, my column is {article, formation , tous article , tous formation, notif, offre}. I would like to rearrange it in this order {article, tous articles , espace&nbsp, formation , tous formation , &nbsp, notif , offre} This snippet of code r ...

phphtmltwig

What is the best way to populate an HTML table with data using a Java servlet?

What is the best way to insert data into an HTML table named "messages" with columns "message" and "type" from a Java servlet? ...

javahtmlservlets

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

I am trying to implement a drag and drop file feature on my webpage, but for some reason, it's not working as expected. The drop zone is supposed to change its background color when I drag a file onto it, but that functionality doesn't seem to be ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Exploring the Possibilities of Combining Hover Effects with Unique CSS

I'm encountering difficulties making the :hover state work with a CSS pie slice that I created. Using transparent borders and the border-radius property, I managed to style my div to resemble 1/4 of a pie. But no matter what styles I attempt for the h ...

htmlcss

Distance between two lines within a table cell is larger than expected after inserting an image - XHTML/CSS

I have a table created in XTMl, and within one of the cells I have two lines of text: Firstname Surname I want to add an image to the right of these lines. However, when I try to insert the image using <img>, there ends up being a gap between the t ...

htmlcssxhtml

When a cross-domain iframe is loaded in a private browser, it automatically logs the user out

I've been collaborating with a client to create a unique standalone website on a subdomain. They have requested that I utilize their API to initiate a straightforward post request when a user clicks a button. However, the client prefers the user to ut ...

javascripthtmljqueryiframe

I am struggling to get my card content to align perfectly in bootstrap 5

I'm having trouble centering all the content in my cards, as it keeps aligning to the right side Here is my card code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="wid ...

htmlbootstrap-5card

Using both italic and regular text in an HTML (or ASP.NET) textbox can add emphasis and enhance readability for

Is there a way to achieve this using JavaScript? For instance, if the initial text is 'Axxxxxx', I want it to be displayed in a textbox with normal style for the first letter and italic style for the rest like 'A*xxxxxx*' If the initia ...

javascriptasp.nethtmlcss

Fixed position of the element within a parent stacking context

How can I ensure that the #icon appears below the #dropdown in the following example? https://i.stack.imgur.com/GoBcR.png The position: fixed of #container seems to be creating a new stacking context for its children. Changing the position value fixes th ...

htmlcss

The key to crafting the perfect container rests in getting the dimensions, height settings, and footer just right for showcasing the figure with an icon and Font

I am currently tackling one of the bootstrap challenges and I find myself at the final stage where I am working on completing the landing page. However, I have encountered a few minor issues with the container in the div as well as the footer. My main con ...

htmlcssbootstrap-4

Styling the cursor in an input box: Using CSS and Javascript

After spending some time delving into the code of wallbase.cc, I've been trying to uncover the secret behind styling the input box similar to the one featured on their homepage. My main curiosity lies in how they achieve the quickly blinking cursor an ...

javascriptcss

Issue with utilizing addEventListener("load") in Firefox in conjunction with <iframe>

I've encountered an issue with my iframe when it is used as the target for a form. In all major browsers, except for Firefox, the iframe successfully removes the main element upon pressing the submit button. However, in Firefox, the main element is re ...

javascripthtmlfirefoxiframeecmascript-6

Collection of categories within the drop-down menu

I'm currently utilizing Twitter Bootstrap and would like to create a collection of concealed fields within a dropdown menu: <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Export <b class="ca ...

htmlcsstwitter-bootstrapdrop-down-menu

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

javascriptphpjqueryhtmlajax

Display only two random data points for each value

I have this code snippet that displays data from a database and filters "Provider" categories with "searchByProvider". Is it possible to only show 2 random pieces of data when someone selects "Provider"? There is a lot of data under Provider, but I want to ...

phphtmlcssmysqlajax

Why should we bother with adding additional div elements?

Can you identify the distinctions between these two pieces of code? How does it impact the structure if we add another nested div within the first one? <div class="blah"> <div class="blahInner> <img src="pony.jpg"> < ...

htmlcss

Div's background color only extends across half of its width

I am having trouble making my div (#signupform) have a light grey background color that extends to the full height of the div. Currently, the background color stops at the end of the email input field. Any suggestions on how to fix this issue? For refer ...

htmlcss