Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
Improve this question
I'm having problems using flex. I tried to separate some <div>s, but the <div>s get mixed one on top of each other. I know I can fix it using positioning but I think flex is cleaner.
html {
box-sizing: border-box;
margin:0;
border:solid 1px;
padding:0;
width:100%;
}
body {
border:solid 1px;
font-family: sans-serif;
color: #0a0a23;
display:flex;
margin:0;
height: 100%;
padding:0;
width:100%;}
nav{
width:300px;
height: 100vh;
border:solid 3px grey;
border-top:transparent;
border-left:transparent;
border-bottom:transparent;
margin:0px;
position: fixed;
max-width:800px;
}
main{
border:solid 1px;
width:calc(100% - 400px);
padding:0;
white-space: normal;
position:relative;
margin:10px 50px;
}
I try using space evenly and space around and get worse
It looks like the problem might be that the <nav> and <main> elements are set to position: fixed, which removes them from the flow of the document and makes them positioned relative to the viewport. To achieve the desired layout using flex, you should set the body to display: flex and use the flex property to specify how the <nav> and <main> elements should be arranged.
Here's what you can do:
html {
box-sizing: border-box;
margin: 0;
border: solid 1px;
padding: 0;
width: 100%;
}
body {
border: solid 1px;
font-family: sans-serif;
color: #0a0a23;
display: flex;
margin: 0;
height: 100%;
padding: 0;
width: 100%;
}
nav {
width: 300px;
height: 100vh;
border: solid 3px grey;
border-top: transparent;
border-left: transparent;
border-bottom: transparent;
margin: 0;
max-width: 800px;
flex: 0 0 300px;
}
main {
border: solid 1px;
width: calc(100% - 400px);
padding: 0;
white-space: normal;
margin: 10px 50px;
flex: 1;
}
Related
In this example, which I'm trying to understand, definitely overflow happens, but it doesn't work. why?
body, html, p {
margin: 0;
padding: 0;
}
html{
background-color: #666;
}
body{
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div{
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p{
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
HTML: Inside Body Tag
Emmet: div>p>lorem10
Body should always cover 100% of the width. I would suggest you set a inner wrapper instead that you use overflow hidden on.
https://jsfiddle.net/jjxurtpk/
html
<div class="wrapper">
<div>
test
</div>
</div>
css
.wrapper{
width:400px;
overflow:hidden;
background:#eee;
padding:20px;
}
.wrapper div{
width:500px;
background:#ddd;
padding:10px;
}
update: https://jsfiddle.net/jjxurtpk/1/
I believe the overflow hidden does not fully apply unless the background (html) does not have overflow hidden. I'm not sure why. It could just be thats how browsers simply render the body tag.
See this fiddle
You will have to add overflow:hidden to html too ..
See the below CSS
body,
html,
p {
margin: 0;
padding: 0;
}
html {
background-color: #666;
overflow:hidden; /* <---------------add this----------*/
}
body {
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div {
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p {
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
You need to set a height on the body, and apply overflow: hidden to the html.
See demo here
html{
overflow: hidden;
}
body{
height: auto;
}
my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
I have an application which I am trying to layout. Everything is fine apart from the left column content. It should display 100% of the height of the parent container, the same height as the right column.
#Container is the outer container.
#TreeList is the left column.
#Tabcontrol is the right column.
This is what my app looks like right now:
And here is the current css for my app:
html {
font-family: Open Sans, Calibri, Arial;
margin: 0 auto;
width: 1500px;
}
body {
}
#Container {
float:left;
width:100%;
position:relative;
border:1px solid black;
}
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
}
height: 100%; does not work like some would expect, you need a given height (em,%,px,etc..) on the parent element. In this case Your body I suppose. Add this to your css:
html, body{
height: 100%;
}
If you need a flexible parent container height there are several workarounds to achive that:
#1 Flexbox
You might take a look here: Flexbox Guide, works pretty neat, with the downside of browser support.
#2 Absolute positioning
Give the parent position: relative; And your element position: absolute; top: 0, bottom: 0; left: 0; for example.
#3 jQuery Plugin: matchHeight
This plugin does the job as well: matchHeight, only requires jQuery included and javascript to run
You haven't set any height in your css document, therefore all of the heights are pretty much random. First off set a main height for your body & html and then for the container like so:
html, body {
height: 100%;
}
#Container {
float:left;
width:100%;
position: relative;
border:1px solid black;
height: 100%;
}
Then for your other elements:
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
height:100%;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
height: 100%;
}
Or if you prefer you could use position: absolute; for your child element and do something like this:
child {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100px;
}
Which will make the elements stretch to the entire screen and keep a width you choose.
This should work, although I highly recommend using Javascript to set the height for body as well as position: absolute; instead of relative;
Add 100% height to the left column.
#TreeList { height:100% }
I am displaying images in HTML control horizontally. The images TABLE is inside main DIV. CSS for DIV is as follows:
#main
{
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
The problem is that main DIV border is not extending and images are dropping out of it as shown in following screenshot:
Here is the HTML scippet:
<body>
<div id="main">
...
<table>
<tr id="image-list">
</tr>
</table>
...
</body>
Please suggest how to alter code so that DIV border automically increase its width as per images in it?
The issue which you are encountering - Demo
And this is what will fix the issue, am doing nothing fancy, I assigned width: 100%; to the table element, and than am using table-layout: fixed; which is important here, and than just use max-width: 100%; for your img tag... Also make sure you use width for your td elements as well...
Demo (Fixed issue)
#main {
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
img {
outline: 1px solid #eee;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
table tr td {
width: 33%;
}
table tr td img {
max-width: 100%;
}
give :
table{width:100%;}
as well as
#main
{
width: 100%; /*not auto*/
/*remaining css */
}
that would solve your problem
so, final css :
html, body {
width:100%; /* important */
height:100%; /* important */
margin:0;
padding:0;
}
#main {
width: 100%; /* changed*/
height: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
table{
width:100%; /* changed*/
height:auto;
border-collapse: collapse; /* added and very important*/
table-layout: fixed;/* added and very important*/
}
img{
width:auto; /* change as per your need */
max-width: 100%;
height:auto; /* important to maintain aspect ratio of images */
}
your problem
solution demo
Put this CSS in your stylesheet to fix it:
#main
{
width: 400px /*you can give fixed value or auto value*/;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
#main table
{
width:100%;
}
I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?
http://codepen.io/anon/pen/xujAC
There's the codepen of my code. The red and blue background are for visual reference only.
Shouldnt the blue background (.container) only extend 20px below the blocks?
Pretty new at this and learning as I go. I'm probably missing something easy.
Thanks a lot.
You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.
Other things that throw this off are:
floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.
Demo fiddle
Updated CSS:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background-color: #dcdcdc;
position: relative;
}
#content {
position:relative;
margin: 0 auto;
width: 960px;
min-height: 500px;
max-height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 2px 2px #111;
background-color: red;
padding: 20px;
padding-top: 0;
}
#banner {
width: 900px;
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
top: 15px;
left: 30px;
height: 100px;
box-shadow: 0 2px 0 #ddd;
}
#banner h2 {
color: #555;
text-shadow: 0 -1px 0 #000;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
background-color: blue;
}
.blocks {
display: inline-block;
width: 250px;
height: 150px;
background-color: #666;
margin: 25px;
margin-top: 30px;
}