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;
}
Related
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
I'm working on a layout with 100% height sections and have been struggling to make this sections expand with the content when necessary.
I've tried height: auto; min-height: 100%; but it doesn't work.
Here's a FIDDLE
Use
.wrapper {
height: 100vh; /* vh instead of % */
}
For some reason - which I have no time to investigate further at this point - this solves it only if I reduce your markup to the relevant minimum, see the fiddle:
https://jsfiddle.net/jt49a064/6/
This should serve you as a starting point to fix it yourself now.
try this in your css
display:inline-block;
does this work for you??to change it itself you need to use auto instead of %
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: white;
}
.wrapper {
width:auto;
height: auto;
background: SkyBlue;
}
.container {
width: auto;
height: auto;
background: green;
}
.table {
display: table;
width: auto;
height: auto;
}
.row {
display: table-row;
width: auto;
}
.cell1, .cell2, .cell3 {
display: table-cell;
width: 33%;
}
.cell1 {
background: blue;
}
.cell2 {
background: red;
}
.cell3 {
background: LightSalmon;
}
You can use display: table; and table-row for you containers :
In the CSS for the parent write this :
display: parent;
For the children :
display: table-row;
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
I have two fixed sized div and I want to keep them horizontally middle even if I re-size the screen. Even if I remove one div for low screen, I want to keep other in the middle.
Here is the code I have tried...
Fiddle
<div id="wrapper1">
<div id="one">1</div>
<div id="two">2</div>
</div>
CSS from here...
#wrapper1 {
width: 100%;
height: 90px;
margin: 0 auto;
}
#wrapper1 #one {
width: 200px;
height: 90px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
width: 100px;
height: 90px;
margin-left: 10px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#media screen and (max-width: 400px) {
#wrapper1 #two {
display: none;
}
}
Demo
text-align:center into your parent div will make all the child div's will come in the center.
css
#wrapper1 {
width: 100%;
height: 90px;
text-align: center; /* add just this to make child elements center in parent div */
}
just add the mentioned below css :-
#wrapper1 {
display: table;
height: 90px;
margin: 0 auto;
text-align: center;
width: 100%;
}
through display:table and text-align:center into your parent div all the child div's will come in the center either its 1 or more than 1 div....
DEMO
I can't make two areas of content float beside each other without disrupting my container. I have the first area cued to float:left but when I cue float:right to content area 2 my container doesn't work anymore.
The object does float right but the container disappears.
Here is my website http://aasdsafasdf.weebly.com/ (I'm in the very early stages)
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
}
#content2 {
float: right;
height: auto;
width: 350px;
}
There are some markup errors on your page (notice the </script> tag after one of your links to a stylesheet?) but just set your container to hide overflow:
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
overflow:hidden
}
#content2 {
height: auto;
width: 350px;
float:right;
}
That should fix the issue. But make sure you fix up your code... it has a variety of issues now: http://validator.w3.org/check?uri=http%3A%2F%2Faasdsafasdf.weebly.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
display: block;
}
#content2 {
float: left;
height: auto;
width: 350px;
display: block;
}
You want both content div's to float left and be display:block;, then they will push up against the one to its left.