I have two panel, panel1 is float left with fix width, and panel2 will take the remain width. In the panel2, I have multiple boxes which also have 2 small session, session 1 is float left, and another take the remain width. The problem that I have is the vertical white space between the first box and second box as shown in the snippet. I detect that the length of panel causes this problem. How can I fix this problem by erase the white space between the first box and second box?
.prefix-clear:after {
display: table;
content: "";
clear: both;
}
.box-1 {
float: left;
width: 50px;
background: red;
}
.box-2 {
margin-left: 50px;
padding: 5px;
background: green;
}
.left {
float: left;
width: 50px;
background: red;
}
.box-2 {
margin-left: 50px;
background: yellow;
}
<div class="prefix-clear">
<div class="box-1">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div class="box-2">
<div class="box prefix-clear">
<div class="left">box</div>
<div class="right">1</div>
</div>
<div class="box prefix-clear">
<div class="left">box</div>
<div class="right">2</div>
</div>
<div class="box prefix-clear">
<div class="left">box</div>
<div class="right">3</div>
</div>
</div>
</div>
If you are just looking to remove the white-space, try display: table-column; for your prefix-clear:after declaration. More than that and we may need a mock-up to see what you are trying to achieve.
Related
Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
I need to split a 1170 grid into 8 boxes of X each with each box having the same amount of padding on the left and right. I can't seem to get it right :(
I managed to do 134 x 8 pixels and then a gutter of 14 each but that doesn't work because then the first and last box wouldn't have the same padding.
You could try calc
padding: 7px;
width: calc(12.5% - 14px);
More on Calc at W3Schools.com
If you are able to use flexbox, you can get even spacing in only a few lines instead of calculating by hand. The best resource I've found for flexbox is https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
width: 1170px;
display: flex;
justify-content: space-between;
}
.item {
border: 2px solid red;
width: 50px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
As commented, flex makes it easy.
+ selector will help to manage visually even padding
.flex {
display:flex;/* block level */
width:1170px;/* any values here or none */
height:100px;/* whatever: demo purpse*/
margin:auto;
background:lightgray;/* whatever: demo purpse*/
}
.flex div {
flex:1;/* sprays child evenly to fill whole space*/
padding:1em;
background:gray;
background-clip:content-box;/*show box minus padding area */
}
.flex div + div {/* make padding visually even */
padding-left:0;
}
div div {
display:flex;
align-items:center;
justify-content/* it's not text-align*/:center;
}
/* not just sure if that would be fine ? */
.flex:hover div {
padding:21px;
box-shadow:0 0 0 1px white
}
<div class=flex>
<div>average 128px each</div>
<div>width for content</div>
<div>is less or more</div>
<div>according to font-size</div>
<div>padding is 1em</div>
<div>but could be</div>
<div>static units</div>
<div>such as pixels</div>
</div
you do not want to use flex because you (unfortunate you) run IE8 ? display:table + table-layout:fixed will do the job for you
.flex {
display: table;
/* block level */
table-layout: fixed;
/* sprays child evenly if no width is specified*/
width: 1170px;
/* any values here or none */
height: 100px;
/* whatever: demo purpse*/
margin: auto;
background: lightgray;
/* whatever: demo purpse*/
}
.flex div {
display: table-cell;
padding: 1em;
background: gray;
background-clip: content-box;
/*show box minus padding area */
}
.flex div + div {
/* make padding visually even */
padding-left: 0;
}
div div {
vertical-align:middle;
text-align : center;
}
/* not just sure if that would be fine ? */
.flex:hover div {
padding: 21px;
box-shadow: 0 0 0 1px white
}
<div class=flex>
<div>average 128px each</div>
<div>width for content</div>
<div>is less or more</div>
<div>according to font-size</div>
<div>padding is 1em</div>
<div>but could be</div>
<div>static units</div>
<div>such as pixels</div>
</div
For some reason my jsFiddle here wouldn't work but I got eight columns working here: http://codepen.io/anon/pen/zoyEme
Make two half columns then put four columns in each of those for a total of eight.
Code:
.container,
.row,
.col-lg-6 {
padding-left: 0;
padding-right: 0;
}
div {border: 1px dotted red;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="sidebar-wrapper"></div>
<div class="content-wrapper"></div>
</div>
The height of content-wrapper is dynamic (auto). Is there any way to get the height of it and use it for the sidebar-wrapper so that it looks nice?
Displaying them like table cells would do it. Table cells can adjust their height automatically to the content, and all cells on the same row get the same height. If you give the side bar a fixed width (which is likely), you can easily get the content wrapper to fill the remaining space.
Whichever has the longest content will determine the height.
.wrapper {
width: 100%;
display: table;
}
.sidebar-wrapper,
.content-wrapper {
display: table-cell
}
.sidebar-wrapper {
width: 200px;
background-color: silver;
}
.content-wrapper {
background-color: yellow;
}
<div class="wrapper">
<div class="sidebar-wrapper">Here is <br>content<br>that is .....<br><br><br><br><br><br>Quite long</div>
<div class="content-wrapper">Smaller content</div>
</div>
Flexbox is an alternative to #GolezTrol's CSS tables.
.wrapper {
display: flex;
}
.sidebar-wrapper {
width: 200px;
background-color: silver;
}
.content-wrapper {
background-color: yellow;
flex: 1;
}
<div class="wrapper">
<div class="sidebar-wrapper">Here is
<br>content
<br>that is .....
<br>
<br>
<br>
<br>
<br>
<br>Quite long</div>
<div class="content-wrapper">Smaller content</div>
</div>
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example
I'm looking for the classic page layout:
Header 800 Pixel, Navi (left) 200 Pixel, Content (right) 600 Pixel
Is it possible to put this in 3 DIVs only?
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
Because every layout I've found so far is built this way:
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Thanks!
Roman
You surely can do it the way you told.
The thing is that code :
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Will be easier to make and maintain. For example, you just need to specify a single margin-top on #panel to control margin between header and nav+content. With your code, you'll have to specify it twice, on #navi and on #content.
Don't think it's too complex-- just set the header to width 100%. Check it out: http://jsfiddle.net/ASy67/
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
And the CSS:
div {
height: 100px;
}
#header {
background: #f00;
width: 100%;
}
#left {
background: #0f0;
float: left;
width: 200px;
}
#right {
background: #f0f;
width: 600px;
}
With this example, the content does appear behind the left sidebar. You can fix it by either adding float: right; to the #right, or padding-left: 200px; to #right.