How can I eliminate the whitespace and fix the positioning of div elements on the

There seems to be an issue with excessive white space between the nested divs .boxwrap and .lsmlbox + .rsmlbox, making it difficult to align .smlbox + .rsmlbox with .box. Is this problem more complex than anticipated?

I am hoping to adjust the "inner" (center of screen) margins of .lsmlbox and .rsmlbox based on screen size, while keeping the outer borders "sticky" to .boxwrap so that the boxes shrink in width but maintain alignment with the full-sized .box above.

.box
{
margin-left:5%;
margin-right:5%;
margin-bottom:80px;
}

.boxheader
{
font-size:17pt;
letter-spacing:3px;
padding-bottom:10px;
text-transform:capitalize;
}

.boxcontent
{
text-align:left;
border: 1px dotted #000000;
border-top: 0px;
border-bottom: 0px;
padding-left:15px;
padding-right:15px;
letter-spacing:3px;
}


.boxwrap
{
margin:0 5%;
}

.lsmlbox
{
display:inline-block;
max-width: 30%;
margin-bottom:80px;
margin-right:4%;
vertical-align:top;
}

.rsmlbox
{
display:inline-block;
max-width:30%;
margin-bottom:80px;
margin-left:4%;
vertical-align:top;
}

HTML:

<div class="box">
<div class="boxheader">SLDKFJSDLFKJSDLKJF.</div>
<div class="boxcontent">
SDFSDFLSDFSDFLKJ
</div>
</div></div>

<div class="boxwrap">
<div class="lsmlbox">
<div class="boxheader">Meet the Owner</div>
<div class="boxcontent">SDFSDFSDF</div></div>

<div class="rsmlbox">
<div class="boxheader">Your Best Source Since 1977</div>
<div class="boxcontent">
SDFSDFSDFSDFSDF
</div></div>
</div>

Edit: removed floating divs but encountering a new challenge now.

Answer №1

Choosing the right approach can vary depending on your specific needs, but one option is to utilize:

display: inline-block;

To keep all desired items aligned in a single line

Answer №2

Another option you have is to utilize the property position:absolute;. To solve your specific issue, simply eliminate the float from both .lsmlbox and .rsmlbox, and insert the following code into your .rsmlbox:

.rsmlbox
{
position:absolute;
top:8px;
left:700px;
margin-right:20%;
width:27.5%;
margin-bottom:80px;
}

I trust this information proves beneficial to you!

Answer №3

To prevent layout issues when using float, you can maintain the structure by enclosing your code within a container.

CSS

.clearfix {
    position:relative;  
}
.clearfix:after {
    content: "&nbsp;";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

HTML

<div class="clearfix">
<div class="lsmlbox">
<div class="boxheader">Discover Our Services</div>
<div class="boxcontent">
Lorem ipsum dolor sit amet
</div></div>

<div class="rsmlbox">
<div class="boxheader">For All Your Needs</div>
<div class="boxcontent">
Lorem ipsum dolor sit amet
</div></div>
</div>

Answer №4

It really depends on the situation. Float can be effective in some cases.

On the other hand, inline-block may work better for specific scenarios. Personally, I find inline-block to be quite useful.

If you want to dive deeper into this topic, check out the link here.

For a demonstration, take a look at this sample: http://jsbin.com/qikubuce/1/edit?html,css

Answer №5

A successful approach is to use display-block instead of float, which was originally meant for images. Take a look at this fiddle showcasing the usage of inline-block.

I've labeled both boxes with a class name "box" and converted their current classes into IDs:

.box{display:inline-block;}
#lsmlbox{}
#rsmlbox{}

Utilizing one class name for both boxes helps minimize redundant rule writing.

Consider converting the inner <div> elements to paragraphs for consistency. You can then establish a universal style rule using the following CSS:

.box p{padding:10px;color:#333;etc....}

Check out the updated fiddle for a demonstration.

I hope you find this information useful.

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

Tips for uploading website data into the value input field of an HTML form

After receiving data from PHP hosted on a website, I want to display the data as an input value in my code: $("#MerekDagang").load("http://jiyo-hotel.com/bpom/data.php?id=1&act=Get_MerekDagang").value; I'm trying to figure out how to load the da ...

I've encountered an issue where my React website functions correctly on the development server but not on the live website. Where should I start investigating to find the cause of this discrepancy?

I am trying to embed a Datawrapper map using the following code: import InnerHTML from 'dangerously-set-html-content' export function Map1(){ const htmlFile = `<div style="min-height: 374px"> <script type="text ...

Experience the smooth transition effects of sliding down the login box when hovering over an image or div

Is there a way to switch the hover js transition effect to a different transition type like fadeIn, fadeOut, or simple transitions? Check out this link for more details. Here is an example of the HTML code: <img id="login-trigger" src="http://www.join ...

Unable to locate external CSS files in Firefox using the absolute file path

On my website, I have included the following line in the <head> section: <link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" /> Upon viewing the page in Firefox 11.0, it appears that the main.css file is not ...

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

Tips on centering the bootstrap navigation toggle button

I am facing an issue with the Bootstrap 4 navigation. I am trying to align the logo/brand to the left, navigation buttons in the center, and login/My Account button on the right. However, whenever I click the navigation button on mobile, it suddenly shif ...

What's the best way to target an input that's appearing as it slides in from the edge of the screen?

My webpage has an element called #cols that is three times wider than the <body>. This element contains three columns, each exactly as wide as the <body>. When a button is clicked, the #cols element slides over by the width of one column while ...

obtain the index of the parent element

Consider this snippet of code <ul class='target'> <li><a>zero</a></li> <li><a>one</a></li> <li><a>two</a></li> <li><a>three</a></l ...

When using onclick="location.href='page.html'", the page fails to load on Safari browser

I've been having trouble with getting onclick="location.href='link.html'" to work and load a new page in Safari (5.0.4). In my project, I am creating a drop-down navigation menu using the <select> and <option> HTML tags. I have ...

Issue with button functionality in Angular 7 carousel slider

My latest project involved creating a basic piece of HTML code that includes a Bootstrap carousel. Here is the code snippet: <!--The content below is only a placeholder and can be replaced.--> <head> <link rel="stylesheet" href="https://s ...

I found myself continuously revolving four images along a circular border, each time revealing the corresponding content. However, I only required the content from one of the images at a time

I attempted to animate the rotation of a circle and display the content of a specific image by pausing it for a period of time. However, I am unsure how to halt the animation and display the content of the specified image. Here's what I tried: HTML C ...

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

I have a basic HTML file with a Bootstrap form, along with a simple API coded within. In my server.js file, I've specified that when I request /about, it should redirect me to the about.html page. However, instead of redirecting, I'm encountering ...

Enhance parent style when child's data-state or aria-checked attributes are updated in React using Styled Components

Within a label, there is a button embedded as shown below: <MyLabel htmlFor='xx' onClick={() => onChange}> <MyButton id='xx' {...rest} /> Check it! </MyLabel> In the Developer Tools Elements section, the st ...

the use of double quotes within the value attribute of an HTML element

I have a variable: <?php $val = 'abc"def\'ad'; ?> My HTML code is as follows: <input type="text" value="<?php echo $val; ?>" name="xyz" /> Unfortunately, the input field does not display all of the text due to the ...

How can I place the current date inside a red dashed box with text using JavaScript?

Let's Solve This: The date currently appears in the top left corner without any special formatting. My goal is to make it bold, red, and encased in a dashed-red border. I have identified the element by its ID "datetext", corresponding to a "p" tag w ...

Creating a striking Materialize Jumbotron: A step-by-step guide

Recently, I came across a sign up page that caught my eye. You can view it here. Upon inspecting the source code, I discovered that it was built using angular material design. This led me to wonder how I could achieve a similar look using Materialize.css ...

Is Bootstrap failing to function properly in my Angular project?

During my work on an angular project, I decided to implement bootstrap CSS and js for styling. However, after completing the project, I noticed that the bootstrap was not functioning correctly. I found that when I used the CDN link in the project, the bo ...

Trigger CSS transformations when a button is clicked

I have a form with a button on the left side and an image on the right side. When the user clicks the button, I want the image to rotate around its Y axis and display another div showing the result. Here is the code snippet: <div class="col-lg-4 co ...

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

Unable to see background image inside div

Why is the background image not showing up in the left column? I've applied the CSS background-image to .left but it's still not working. Any suggestions on what might be causing this issue? It seems like a small problem, but it's really bot ...