I would like to have 4 panels (sections).
The 2 top ones should be along the whole width.
The 2 others should be next to each other.
The top one should have no margins at all.
The 2nd panel should have no top-margin (and no bottom-margin to
avoid a double one with the ones below).
The problem here is: The 2 panels next to each other have a double margin in the middle. In this case it's 10 + 10. I need them to be 5 both in order to get a total of 10px. However, when I apply this to my code then the extra space left over would end up on the right..
Can anyone help with a solution? Rewriting any code to improve (making it easier to maintain) is also welcome :).
EDIT:
I had my container width to 240px for testing the flex i made. This caused the extra space on the right when applying the margin of 5. However, there should be a way to avoid this double margin with any container width. Does anyone have a solution?
EDIT:
Had to set the flex-grow to true. Now the margin of 5 + the grow possibility seems to fix the problem. No matter what container size I have.
body {
background-color: #cccccc;
}
#container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
background-color: #444444;
width: 270px;
}
#container > * {
width: 100px;
height: 100px;
background-color: #228822;
flex-basis: auto;
}
#container .neighbour {
flex: 1 1 auto;
margin: 10px 0;
}
#container .solo {
flex: 1 1 100%;
}
#container .solo.red {
background-color: #ff0000;
}
#container .solo.small {
height: 30px;
margin: 0;
}
#container .solo.no-top {
margin: 0 10px;
}
#container .left {
margin-left: 10px;
margin-right: 5px;
}
#container .right {
margin-left: 5px;
margin-right: 10px;
}
<div id="container">
<section class="solo red small"></section>
<section class="solo no-top"></section>
<section class="neighbour left"></section>
<section class="neighbour right"></section>
</div>
.no-right{
margin-right:5px;
}
.no-left{
margin-left:5px;
}
Does tagging that to the end of your stylesheet work?
Related
please help solve the problem.
there is a page fiddle. If you compress it to the width(width < 420px), the bottom scrolling appears. and it should not be because it makes the bootstrap adaptive layout:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 110px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
background-color: #fff;
}
body > .appointment_mobile > .container {
padding: 0px 15px 0;
}
please help remove the lower scrolling.
Be careful when adding padding:0 to your container. You'll break the Bootstrap logic and create that unnecessary margin.
This code is better if you just want to hide the top & bottom paddings.
body > .appointment_mobile > .container.menu_area {
padding-top:0;
padding-bottom:0;
}
.footer > .container.footer_area {
padding-top:0;
padding-bottom:0;
}
TL;DR you shouldn't do any left & right padding modification in the container class.
you can use
body {
overflow-x: hidden;
}
but actual problem is being caused by bootstrap.css:1606. which you can also override in your css (only for width < 480px)
.row {
margin-right: -15px;
margin-left: -15px;
}
EDIT :
You used to many .container class, when you use only one or two, it solves your problem.
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
</div>
You can also see this answer: horizontal scrollbar appearing, row having negative margin
Here is a fiddle working: http://jsfiddle.net/52VtD/11250/
Hope it helps :)
.container > .row {
margin-left: 0;
margin-right: 0;
}
http://jsfiddle.net/52VtD/11248/
I'm experiencing strange behavior in Firefox (v35 v39 v52) regarding percentage padding. I cannot reproduce this issue in Chrome.
I have an element with top padding set as a percentage, like this:
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
}
Percentage padding on an element is relative to its parent's width. So, I expect that the padding at the top of the element will grow as the window's width is enlarged. This is indeed the result for my simple <p> tag.
However, when that element is floated or has width, the percentage padding does not behave as expected when the window is resized. The padding is calculated correctly upon load. But, as the window is resized, the total height of elements that are floated or have width seems to remain the same. Text in the element is inexplicably placed at the bottom of an area that gets mysterious height. This happens for elements like this:
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
float:left;
}
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
width:150px;
}
Here is an image to illustrate what I'm seeing. Color coding is added by Firebug; purple is padding, yellow is margin, and blue is the content of the element.
What causes this inconsistency? Can anyone else reproduce this issue in Firefox (or any other browser)?
Here's a fiddle to demonstrate. In Firefox, try expanding or contracting the result pane to see the elements resize.
I have not added a runnable code snippet, as I couldn't find an easy way of resizing the snippet area on-the-fly.
I've added a stack snippet to demonstrate the issue. Use the "Full page" button so you can stretch the window's width.
html,body {
margin: 0;
}
div#container {
width: 100%;
}
p {
padding: 10% 0 0;
margin: 0 0 1em;
background-color: #CCC;
}
p.width_limited {
width: 150px;
}
p.floated {
float: left;
}
<div id="container">
<p>NORMAL</p>
<p class="floated">FLOATED</p>
<div style="clear:both;height:0;"></div>
<p class="width_limited">HAS WIDTH</p>
</div>
That's strange. I'm not sure if it is a bug. But, by changing the display to flex seems to solve the problem. http://jsfiddle.net/vsvp71rw/4/
p {
display: -webkit-flex;
display: -moz-flex;
display: flex;
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
}
you may use a pseudo element to avoid the bug and clear those height of 10%'s width you wish.
html,
body {
margin: 0;
}
div#container {
width: 100%;
}
p {
margin: 0 0 1em;
background-color: #CCC;
}
p:before {
content: '';
padding: 5% 0;
display: block;
}
p.width_limited {
width: 150px;
}
p.floated {
float: left;
<div id="container">
<p>NORMAL</p>
<p class="floated">FLOATED</p>
<div style="clear:both;height:0;"></div>
<p class="width_limited">HAS WIDTH</p>
</div>
I want to make some kind of image viewer with some descriptive text below. Problem is, that the lower box with the description has a fixed height and the image should fill the remaining height of whatever container it is in.
I wanted to use flexbox for that, as I think it seems to be the most elegant and simple solution (without using JS).
This this code and codepen for my current work, which seems to work mostly:
html, body, #container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
max-width: 75%;
background-color: #fcc;
margin: 0 auto;
}
img {
max-height: 100%;
/* HERE IS WHERE MY PROBLEM STARTS!; */
max-width: 100%;
}
#container > #text {
flex-grow: 0;
flex-shrink: 0;
background-color: rgba(128, 128, 128, 0.7);
padding: 5px;
max-width: 75%;
margin: 15px auto 0;
/* TOP MARGIN DOESN'T WORK */
}
http://codepen.io/Kageetai/pen/AaCJy
I got most of it to work but the image is not resizing itself correclty. As you can see through the transparent background of the text box, it stretches itself over the border of the containing div and even behind the text box.
So how can I retain the image with the correct aspect ratio inside its container?
And furthermore the centering with margin: 0 auto; seems to make problems when resizing the window. The image is not centered anymore and the page needs a refresh to make it work again.
So does anyone know how to make the image behave correctly? :)
For image , you can set an height, margin and display.
For image container, give a 2 or 3 value to flex and none to other, so it fills as much space as avalaible.
DEMO
CSS used :
html,
body,
#container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #text {
background-color: #ccf;
padding: 5px;
}
#container>#image {
flex:3;
display:flex;
}
img {
width:auto;
display:block;
margin:auto;
height:100%;
}
Here's a more basic demo of how to achieve this.
<html style="height: 100%">
<body style="height: 100%; margin: 0; display: flex; flex-direction: column">
<p>Toolbar</p>
<div style="background: #bbb; flex: 1">Image</div>
</body>
</html>
A demo can be seen over at Codepen.
I am new to web design (as you can tell) and playing around with page layouts. I have build the following very basic fluid page that has two column divs (floats) and one div below that I want to set the width to match that of the two floated ones above. As you can see from the screen grab, the red 'strip' isn't as long..
So basically what I have is 2 divs (#main and #extras) floated left. #main has a width of 65% and #extras has a width of 20%. Main has a left and right margin of 3.666666666666667% and #extras just a right margin of 3.666666666666667% which centers it on the page pretty much. I also have 1% padding for both #main and #extras.
I set the third div .strip (which should be exactly the same length as the #main and #extras combined as follows:
left/right margin 3.666666666666667%
2% padding (to equal the combined padding of the #main and #extras divs)
width: 85%
My calculations (although my math is terrible) makes that add up and as far as I can tell the third div #strip should be as long as the two above. But as from the picture, it isn't.
Is this something to do with a compounding effect?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
width: 100%;
background-color: gray;
margin: 0;
}
#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 3.666666666666667%;
padding: 1%;
}
#extras {
float: left;
width: 20%;
background-color: orange;
margin: 0 3.666666666666667% 0 0;
padding: 1%;
}
#footer {
width: 100%;
clear: left;
background-color: gray;
margin-top: 5%;
}
.strip {
margin: 0 3.666666666666667%;
clear: left;
background-color: red;
padding: 2%;
width: 85%;
}
</style>
</head>
<body>
<div id="header">2 divs
<p>Header</p>
</div>
<div id="main">
<p>Main content</p>
</div>
<div id="extras">
<p>Extra stuff</p>
</div>
<div class="strip">
</p>I am the strip</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
ts</html>
Its probably wrong calculation.. You can understand this by seeing this image., where the extra margin adding up!
Try this code:
Fiddle:
CSS:
#main
{
float: left;
width: 65%;
background-color: steelblue;
margin-left: 3.666666666666667%;
padding: 1%;
}
The problem is in the calculation. The first line width with values that you have add on properties is around 95.98% but the next lin (red div) the width is 88.86 %. Check the calcultions :)
The two divs as the top have padding between them, their combined width without padding is 85%, you need to set the width of strip underneath to 85% + the width of the padding between the top divs.
Your margin is not set correctly, you have to explicitly specify right margins. Make it like this:
#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 0 0 3.666666666666667%;
padding: 1%;
}
See this fiddle: http://jsfiddle.net/wCWQL/
Your earlier css was this:
margin: 0 3.666666666666667%;
This is a shorthand, where the first value is for top and bottom margins and the second value is for right and left margins.
So you have to explicitly specify all margins so that only the left one is set.
Alternatively, you can only set the left margin:
#main {
margin-left: 3.666666666666667%;
...
}
Hope that helps.
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?