/    Sign up×
Community /Pin to ProfileBookmark

Eliminate gap in the middle

Copy linkTweet thisAlerts:
Aug 17.2019

In the following code, how do I eliminate the gap between the left/right elements?
I’ve tried about every combination I can thing of. Do I need a different approach?

[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width-device-width,initial-scale=1.0, user-scalable=yes”/>
<title> Align Left/Right </title>
<!– Idea from: http://w3schools.invisionzone.com/topic/58810-adding-div-side-by-side/ –>

<style>
* { box-sizing: border-box; }
.lt { display: inline-block; width: 8em; text-align: left;
margin-bottom: 0.5em; /* margin-right: 0; padding: 0.5em; padding-right: 0; /* no effect on gap ??? */
border-width: 1px 0 1px 1px; border-style: solid;
}

.rt { display: inline-block; width: 8em; text-align: right;
margin-bottom: 0.5em; /* margin-bottom: 0.5em; padding: 0.5em; padding-left: 0; /* no effect on gap ??? */
border-width: 1px 1px 1px 0; border-style: solid;
}
</style>

</head>
<body>
<div id=”container”>
<div class=”lt”>Description 1 </div>
<div class=”rt”>Quantity 1</div><br>

<div class=”lt”>Description 21 </div>
<div class=”rt”>Quantity 12</div><br>

<div class=”lt”>Description 321 </div>
<div class=”rt”>Quantity 123</div><br>
</div>

</body>
</html>

[/code]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@KeverAug 18.2019 — The gap is because your code has white-space between the <div> elements. Removing the white-space will eliminate the gap. For what you're trying achieve, it would be better to use a description list or even a plain old table instead of <div> soup.
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
&lt;title&gt; Align Left/Right &lt;/title&gt;

&lt;style&gt;
dl#container * {
width: 8em;
padding: 0 2px;
margin: 0 0 0.5em 0;
border: 1px solid #000;
float: left;
}

dl#container dt {
text-align: left;
border-right: none;
clear: left;
}

dl#container dd {
text-align: right;
border-left: none;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;dl id="container"&gt;
&lt;dt&gt;Description 1&lt;/dt&gt;
&lt;dd&gt;Quantity 1&lt;/dd&gt;

&lt;dt&gt;Description 21&lt;/dt&gt;
&lt;dd&gt;Quantity 12&lt;/dd&gt;

&lt;dt&gt;Description 321&lt;/dt&gt;
&lt;dd&gt;Quantity 123&lt;/dd&gt;
&lt;/dl&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@SempervivumAug 18.2019 — I recommend to use flex layout which is state of the art and makes it easy to achieve the arrangement you require:
&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;title&gt;Test layout&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;style&gt;
.lr {
width: 16em;
margin-bottom: 0.5em;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id="container"&gt;
&lt;div class="lr"&gt;&lt;span&gt;Description 1&lt;/span&gt;&lt;span&gt;Quantity 1&lt;/span&gt;&lt;/div&gt;
&lt;div class="lr"&gt;&lt;span&gt;Description 21&lt;/span&gt;&lt;span&gt;Quantity 12&lt;/span&gt;&lt;/div&gt;
&lt;div class="lr"&gt;&lt;span&gt;Description 321&lt;/span&gt;&lt;span&gt;Quantity 123&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
Copy linkTweet thisAlerts:
@JMRKERauthorAug 18.2019 — Thank you. That worked fine for my needs.

I guess I have trouble seeing seeing things that are not there

(white-space on a white background and white cows in a blizzard :) )

Appreciate the evaluation and alternative solution.
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...