I have a left floating div which serves as a sidebar (red). Next to it, there is another div that stores the page content (green). The elements inside the content div are left floating (blue).
I want to be able to scroll the boxes horizontally when the browser width is too small to accommodate them; for example if there are a lot of boxes. Instead, the content div moves below the sidebar div and I am scrolling the whole page.
Here is the page layout when the browser window is wide enough:
Here is the HTML:
<div id="container">
<div id="sidebar">Sidebar</div>
<div id="content">
<p class="box">Box 1</p>
<p class="box">Box 2</p>
<p class="box">Box 3</p>
</div>
<div style="clear: both;"></div>
</div>
And here is the CSS:
* {
margin: 0px;
padding: 0px;
}
#container {
background: yellow;
}
#sidebar {
float: left;
background: red;
}
#content {
float: left;
white-space: nowrap;
background: green;
}
.box {
width: 200px;
height: 250px;
background: blue;
margin: 10px;
float: left;
}
Please help me understand what am I doing wrong. Thank you.
You simply need something to wrap your content with the CSS property overflow-x: scroll;.
**Important: This is a CSS3 feature and some browsers may not support overflox-x. Therefore, I highly suggest you read the following: http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/.
Preview: http://jsfiddle.net/WXFJU/
HTML
<div id="container">
<div id="sidebar">Sidebar</div>
<div class="overflow-x">
<div id="content">
<p class="box">Box 1</p>
<p class="box">Box 2</p>
<p class="box">Box 3</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
background: yellow;
}
#sidebar {
float: left;
background: red;
}
#content {
float: left;
white-space: nowrap;
background: green;
}
.box {
width: 200px;
height: 250px;
background: blue;
margin: 10px;
float: left;
}
.overflow-x {
overflow-x: scroll;
display: block;
}
You need to set a width for the container too.
Your content-div also needs to have a width.
#content {
width: 1000px;
}
Related
I want to gain the below layout:
It seems that when the right box is small, the bottom left box wants to move away from the left side and beside the top left box. If the right box is full and tall, then it pushes the bottom left box back to where I want it to be.
HTML
<div class=page>
<div id="stack-vert">
<div id="stack-horz">
<div id="message_center_content">
<h2> Your Messages </h2>
</div>
<div id="message_center_details">
</div>
<div id="message_center_details">
</div>
<div id="clearingdiv2"></div>
</div>
</div>
CSS
.page{
margin: 2em auto;
width: 75em;
border: 5px solid #ccc;
padding: 0.8em; background: white; display:table;
}
#message_center_details{
float:left;
border: solid thin black;
overflow:hidden;
padding: 5px;
width: 25%;
background-color: #ffffcc;
margin: 5px;
}
#message_center_content{
float:right;
border: solid thin black;
padding: 5px;
width: 60%;
background-color: #F0F0F0;
margin: 5px;
}
JS Fiddle
It works in jsFiddle, but now in my browser! Instead the two boxes on the left interfere with each other, the bottom one sits to the right of the top one and below the box on the right.
Any help would be really appreciated.
Something you could do
<div id="Container">
<div id="left">
<div class="section">
</div>
<div class="section">
</div>
</div>
<div id="right">
<div id="message">
<div style="width:100px;height:260px;background:white;">Edit this</div>
</div>
</div>
</div>
#Container {
width: 100%;
min-height: 300px;
background: red;
}
#left {
float: left;
width: 40%;
background: yellow;
min-height: 300px;
box-sizing: border-box;
padding: 10px;
}
.section {
width: 100%;
display: block;
min-height: 120px;
background: red;
box-sizing: border-box;
margin-bottom: 10px;
}
#right {
float: left;
width: 60%;
min-height: 300px;
background: blue;
box-sizing: border-box;
padding: 10px;
}
#message {
width: 100%;
min-height: 200px;
background: red;
}
see fiddle for what i would do. I have added colors so you can see whats happening.
adjust the white div height in the HTML tab to see the message div (the red one on the right) adjust its height.
Your content would just go inside the left divs with a class of section, and the right div id message.
I would stay away from libraries until you know how to do most things yourself.
Great place to learn html/css/js and more
You are maybe after such a solution to have two outer divs side-by-side:
.wrapper{
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
}
.side{
width: 30%;
}
.side div{
margin-bottom: 10px;
padding: 10px;
}
.side div:last-child{
margin-bottom: 0;
}
.main{
width: 67%;
}
.main div{
padding: 10px;
}
.border{
border: 2px solid black;
}
<div class="wrapper">
<div class="side">
<div class="top border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
<div class="bottom border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
<div class="main">
<div class="border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
</div>
I'm trying to get two side-by-side boxes to take up the entire width of the screen. However, when setting the width at 50%, each of the boxes wants to extend about 10px wider than 50%. What am I doing wrong?
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}
#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}
.
.
.
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
Both sides need to be floated and make sure that you're using box-sizing: border-box; to ensure that the width is 50% regardless of padding and border size.
I realise that your question has already been solved, but another option to TylerH's solution would be to use flex. Like so:
#sides {
display:flex;
padding: 40px 0px;
background-color: white;
}
.side {
flex:1;
padding: 20px;
margin: 0;
}
#left{background-color: grey;}
#right{background-color: #018DCA;}
<div id="sides">
<div class="side" id="left">
<h1>text</h1>
<h2>text</h2>
</div>
<div class="side" id="right">
<h1>text</h1>
<h2>text</h2>
</div>
</div>
As TylerH rightly pointed out, this does require more modern browsers. Take a look at this website for more information on compatibility.
You don't need to use float (in fact it's not really the right tool for overall document layout; it's more for breaking up text with images without destroying the document flow).
You can achieve this with less CSS by using display: inline-block; and commenting out the white-space between your left and right <div>s. JSFiddle
html, body {
margin: 0;
}
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 50%;
background-color: grey;
padding: 20px 0;
display: inline-block;
}
#rightside {
width: 50%;
display: inline-block;
background-color: #018DCA;
padding: 20px 0;
}
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div><!--
--><div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
Use display:inline-blockAdd font-size:0 to the parent div,this must do. Also try adding vertical-align:top to right div
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 47%;
background-color: grey;
float: left;
padding:5px;
}
#rightside {
width: 47%;
background-color: #018DCA;
float: right;
padding:5px;
}
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!
Really can't figure out what's wrong with it, but all the content I add into div, goes out of it, just like it's not in it.
Check it here: JSFiddle!
HTML___
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
</div>
</div>
</div>
CSS___
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
}
#logo {
float: left;
}
You need to clear your floats:
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT NOW APPEARS INSIDE DIV :)
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Because you've floated your logo, any content following it will wrap around it. Which is what is causing the effect you're seeing.
Add overflow:auto to your #header div to restore the expected behavior:
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
overflow:auto;
}
jsFiddle example
Floating the child essentially removes it from the flow and the parent collapses. Adding the overflow rule gives you the behavior you expected.
I'd urge you to use flex. It's quite robust and lets you create any kind of layout you want without any issues really. I've added a menu to the right hand side just to illustrate your logo in actual context.
<!-- HTML -->
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
<div id="content-menu">
<div id="menu">
Home
Contact
About
About
</div>
</div>
</div>
</div>
</div>
Corresponding CSS:
/* CSS */
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
margin: 1.2em auto;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
display: flex;
}
#logo { flex: 1; }
#content-menu { flex: 4;}
#menu { display: flex; }
#menu > a {
display: inline-block;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #000;
flex: 1;
}