I have a simple flex box containing three divs. I want to set a minimum gap between those divs yet, despite having set the gap property, each div still butts up against another. Can anyone tell me why gap is ignored?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
<style>
.card {
border-style: solid;
border-width: 1px;
border-radius: 2px;
margin-top: 2rem;
display: flex;
align-items: flex-start;
gap: 4rem;
}
</style>
</head>
<body>
<div class="card">
<div>LS</div>
<div class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus consectetur reiciendis, autem tempore recusandae repellat modi a perferendis voluptates similique ex, aut accusantium sint, facilis, atque natus dolores error optio praesentium. Ad, expedita, nihil.</div>
<div>RS</div>
</div>
<div class="card">
<div>LEFTHAND SIDE</div>
<div class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus consectetur reiciendis, autem tempore recusandae repellat modi a perferendis voluptates similique ex, aut accusantium sint, facilis, atque natus dolores error optio praesentium. Ad, expedita, nihil.</div>
<div>RIGHTHAND SIDE</di>
</div>
</body>
</html>
Edit
I'm using Safari 14.0.3
Safari only began supporting flexbox's gap property with version 14.1.
The styling in the question is correct but Safari 14.0.3 does not support flexbox's gap property.
Related
I have text between 2 block float elements and I want to add an additional indentation to the right for a quote id element inside the p paragraph. The problem is that margin-left doesn't work next to a float element and if I use the position: relative method, like in the shown example, then the text will clip the right float block. Is there a way to move the quote text to the right without the clipping?
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
Edit:
For an exact example you can look at en.wikipedia.org/wiki/Hercules at the line Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: You can see that the indented text that follows is essentially between 2 floating images.
The margin is correctly applied.
The problem is that your block is before in your html and it you should be after.
So, for what you are trying to achieve it is better to use display:flex
So I restructure your html, by placing a "container" and applying the flex.
Then, I put all your p into a div and place the right block below.
As you added a left to your #quote you need to adjust width of it too.
So I could remove your float.
DEMO
#left-block{
height: 150px;
width:50px;
/*float: left;*/
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
/*float: right;*/
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
width: calc(100% - 30px);
}
.d-flex{
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-flex">
<div id="left-block"></div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
<p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</div>
<div id="right-block"></div>
</div>
</body>
</html>
You can use a margin, but the value has to be larger than the width of the floated elements, since the margin is measured from to side of the parent element, not taking the floated element into account:
(no need for relative position BTW)
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
margin: 0 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
So the solution that isn't perfect but works, is to simply add overflow: hidden in to the quote element. The explanation seems to be written here
https://stackoverflow.com/a/18718157/18429900
The only issue with this is that it doesn't move the text to the left once it goes lower than the block height as show in the example below.
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
overflow: hidden;
padding-top: 40px;
padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
I am trying to figure out how to make a large div centered on all screens, but also be scrollable for smaller screens that otherwise couldn't see all of the div.
For example, let's say the div has the size of 1200px x 600px. Using the following will center the div, but not allow scrolling on smaller screen sizes:
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
My goal is to find a way to allow these smaller computer screens to see the entirety of the large div (via scrolling) but still have the div be centered on screens of all sizes.
Is this possible? In addition, is there a non-javascript solution?
I hope it will solve your problem.
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
height: auto;
padding: 20px;
background: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<div class="main-wrapper">
<div class="internal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perspiciatis. Assumenda cupiditate culpa obcaecati molestias architecto facilis! Ratione laboriosam reprehenderit asperiores et ipsum est, quisquam modi beatae odio enim nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet libero nam nulla assumenda optio iure adipisci, exercitationem deserunt a. Similique illum cumque eveniet quam enim in provident expedita culpa officia! Lorem ipsum dolor sit amet consectetur adipisicing, elit. Cupiditate ipsam et, nostrum. Dolorum autem qui voluptas doloribus voluptatibus est laboriosam perferendis blanditiis et quaerat iusto, vitae unde itaque dolore nulla.. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem recusandae, repellat velit rerum. Repellendus harum, sequi architecto deleniti tenetur cumque, ducimus itaque, nam officia vero minima quos, debitis quis sunt. Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Architecto, quaerat, illum. Aperiam, repellendus sit atque architecto cupiditate. Quis consequuntur, iure nihil doloremque, aut distinctio quibusdam rem, mollitia incidunt, voluptate quasi?
</div>
</div>
</body>
</html>
Using OSX 10.11.2, jquery.mobile-1.4.5.css "JQM"
The code below produces the image on the left. But if I comment out the JQM I get the image on the right. both have some different functionalities which I need to combined:
float the right and left icons on the topBar and resize them.
fixed top and bottom bar not to scroll up or down.
style some boarders like in image 2.
if I use JQM, it cancels the css for 1 and 3, if I comment it out or even put it under the body tag, it cancels 2 and 3. I would like to include JQM for future use in my webApp which later will be converted to work inside a webView.
Could you please suggest a fix. Thanks
.barTop, .barBottom {
text-align: center;
list-style-type: none;
min-width: 320px;
padding: 0;
margin: 0;
}
.barTop li, .barBottom li {
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0;
background-color: #c8c7c9;
}
.menuIconLeft {
float: left;
width: 2em;
}
.menuIconRight {
float: right;
width: 2em;
}
.menuIconCenter {
width: calc(100% - 5em);
}
.barBottom li {
width: 32%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/myStyle.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<section id="firstpage" data-role="page">
<div class="header" data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="barTop">
<li class="menuIconLeft">
<b>☰</b>
</li>
<li class="menuIconCenter">
Activity label
</li>
<li class="menuIconRight">
<b>⋮</b>
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="barBottom">
<li>
<b>NO</b>
</li>
<li>
<b>EXTRA</b>
</li>
<li>
<b>YES</b>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
There are two parts to understand to solve this type of problem. Firstly, CSS prioritises whatever runs later - if you change a div background-color, and then change it again later, the latter change will apply.
Secondly, is the !important tag. By inserting it, you can force a certain aspect to override anything else that may apply to the code, for example;
height: 2em !important;
With any luck, you should be able to use this to solve your problem.
In the top bar, How can the green and the red "li" area be made with width 3em?, I tried my css as in the code but all the 3 list items remain with equal width.
It will be displayed in a mobile app webView.
Thank you
ul {
text-align: center;
}
li {
height: 2em;
line-height: 2em;
}
.menuIconLeft {
width: 3em;
background-color: green;
}
.menuIconRight {
width: 3em;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/myStyle.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<section id="firstpage" data-role="page">
<div data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li class="menuIconLeft">
☰
</li>
<li>
Activity label
</li>
<li class="menuIconRight">
⋮
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li>
NO
</li>
<li>
EXTRA
</li>
<li>
YES
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
To adhere to the result you where looking for you needed to:
Set your list items display attribute to display: inline-block.
Set your unordered list to list-style-type: none so the list item bullets do not show.
Set your left and right list elements to float: left and float: right respectively, this helps a lot because your left and right list elements will be center aligned (due to your ul { text-align: center }), so they will not flush left and right unless you tell them to.
I added a new class menuIconCenter to the middle list element. This applies a width of width: calc(100% - 6em);, since the left and right list elements are each 3em in width, then substracting both these widths by 100% will yield the remaining width of your center list element.
"How can the green and the red "li" area be made with width 3em?"
Added a header and footer class, to help differentiate how the footer and header sections work. This is an important architectural change, can you tell why?
Added <b> to bold the text in the footer.
Suggestion: if you want to make these list elements clickable or work like buttons do the following (this is in pseudocode!):
<li>
Something here
</li>
li > a {
display: block;
width: 100%;
}
Any questions please ask in the comments below :-)
ul {
text-align: center;
min-width: 320px;
}
li {
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0;
}
.menuIconLeft {
float: right;
width: 3em;
}
.menuIconCenter {
width: calc(100% - 6em);
}
.menuIconRight {
float: left;
width: 3em;
}
.center {
list-style-type: none;
padding: 0;
margin: 0;
}
.header .menuIconLeft {
background-color: green;
}
.header .menuIconRight {
background-color: red;
}
.header .center {
border: 1px solid lightgray;
}
.footer .center {
background-color: lightgray;
}
<section id="firstpage" data-role="page">
<div class="header" data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li class="menuIconLeft">
☰
</li>
<li class="menuIconCenter">
Activity label
</li>
<li class="menuIconRight">
⋮
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="center">
<li class="menuIconLeft">
<b>NO</b>
</li>
<li class="menuIconCenter">
<b>EXTRA</b>
</li>
<li class="menuIconRight">
<b>YES</b>
</li>
</ul>
</nav>
</div>
</section>
I have below code. Weave is
http://liveweave.com/JVtNIk
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS is
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
Please help me understand the reason why the box2 content is not starting from the top but quite from below ? is there any specific reason for that ? I can solve it by adding float but i am just curious on this behavior.
Please someone help me understand.
Thanks in advance
You have this behavior because the baseline of the .box1 is its last line of text. The .box2 starts on the same line as this last line so that explain why it is quite at the bottom. Then the inline attribute makes it continuing under the .box1 like if .box2 was in a <p> tag.
Hope you understood my explaination.