So I have created an example in JSFiddle which is layered out similar to a table, row and cells however which I'm trying to make so the columns are all equal height but as you can see from the white background on each column this is not really working out.
I want to avoid a JS solution and know its possible in CSS but I think I'm just missing something.
JSFIDDLE: https://jsfiddle.net/6swpqhuf/1/
CSS:
body {
background: black;
}
div.table {
display: table;
}
div.row {
display: table-row;
clear: both;
}
div.col {
display: table-cell;
background: white;
width: 30%;
float: left;
margin: 0 20px 20px 0;
}
Following on from my comment. As you can see in your code you have float: left; why is this here? display: table-cell; is already putting them in the same row for you.
Just remove this and it will fix your layout.
div.col {
display: table-cell;
background: white;
width: 30%;
margin: 0 20px 20px 0;
}
DEMO
Related
I'm trying to get two divs to sit side by side. On my computer, in Safari and Firefox, it appears correctly. However, on my client's computer (also using Safari) they are overlapping.
Here is my CSS:
#content
{
clear: left;
float: left;
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline;
}
#aside
{
min-height: 850px;
float: right;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline;
position:absolute;
}
Is there something I missing or have coded wrong? I'm not a web developer but have been tasked with creating a fairly simple page.
Thanks in advance.
If you want something simple and straightforward (assuming #content and #aside are two sibling divs)...
<div id="content"></div><div id="aside"></div>
#content, #aside {
float: left;
}
#content {
background: red;
width: 150px;
height: 150px;
}
#aside {
background: orange;
width: 280px;
height: 150px;
}
Here's a Fiddle to demonstrate
Note: this is a simple solution that might not be the best for what you need. I suggest doing some research on CSS display and position properties.
Hey just change the display property to display: inline-block. You dont need to float any div if you want the div to sit side by side.
#content
{
width: 715px;
padding:0;
margin: 41px 0 0 152px;
display: inline-block;
}
#aside
{
min-height: 850px;
width: 280px;
padding: 50px 40px 0 40px;
margin: 0px 150px 0 65px;
display: inline-block;
position:absolute;
}
display: inline
It will not regard the width or height of any div. When we set display: inline, it will work as if its a "span" which does not regard width or height.
display: inline-block
It will regard the width or height of any div. When we set display: inline-block, it will be inline and it will regard the width and height of div.
The jsfiddle for the code can be found here: http://jsfiddle.net/c4rz0hk1/
The nav-wrapper at the bottom should be centered below the dividing line div at the bottom of the page. The works correctly in Firefox, but in Chrome it placed to the r-hand side of that same line. This is strange as the wrapper is set to 1024px anyways...
Here's a snippet of the css code:
footer {
text-align: center;
width: 1024px;
}
#nav-wrapper {
display: -moz-inline-stack;
display: inline-block;
text-align: center;
width: 900px;
*display: inline;
}
Because footer has floated children, a overflow:hidden should be applied to it so it properly contains them, also your bottom nav needs to have floats cleared as it's siblings are floating causing it to 'go with the flow' (lame joke, sorry I couldn't stop myself :P).
To center the nav simply apply a margin: 0 auto; to it after clearing the floats.
Here's the updated css that I believe works according to your requirements -
footer {
overflow: hidden;
text-align: center;
width: 1024px;
}
#nav-wrapper {
clear: both;
display: block;
margin: 0 auto;
padding: 10px 0; /* Some padding to give the footer some vertical breathing space */
text-align: center;
width: 900px;
}
Updated fiddle: http://jsfiddle.net/c4rz0hk1/1/
Try this:
#-moz-document url-prefix() {
#nav-wrapper {
display: -moz-inline-stack;
text-align: center;
width: 900px;
}
}
#nav-wrapper {
display: inline-block;
text-align: center;
width: 900px;
}
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
Take this web example into account (it seems to have the same issue) I have the following CSS on my website (note the space between the #head and #body <div>'s):
#body {
display: table;
border-spacing: 0;
border-collapse: collapse;
}
#body-row {
display: table-row;
margin: 0;
padding: 0;
}
.column-left, .column, .column-right {
display: table-cell;
padding: 0px;
border: dotted 2px #89E;
}
.column-left, .column-right {
width: 190px;
font-size: .95em;
}
However, this still adds a space between the very top and bottom of the table-cell. Padding and margin do no seem to do anything for this. Advice?
.column-left, .column, .column-right {
vertical-align: top; /* add vertical align top to fix this issue */
display: table-cell;
padding: 0px;
border: dotted 2px #89E;
}