I am trying to create 3 column home layout, in which center, left and right looks fine, but I am unable to create 2 slider division inside div class middle, I actually expect slider1 should come on top, but should be inside the class middle, and slider2 after slider1 inside class middle.
As you can see here JSFIDDLE , slider2 and slider1 is not coming inside div class middle
This is my effort
HTML
<div id="content-container">
<div class="middle">
<div class="slider1"></div>
<div class="slider2"></div>
</div>
<div class="left">
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
CSS
/* Container */
#content-container{
background:white;
margin-top:10px;
margin-bottom:10px;
height:600px;
}
/* follow container height*/
.left,.right,.middle{
height:100%;
}
.left{
float: left;
width: 23%;
border:1px solid red;
}
.right{
float: right;
width: 23%;
border:1px solid red;
}
.middle{
display: inline-block;
width: 53%;
border:1px solid red;
}
/* Sliders */
.slider1 {
height: 50px;
border:1px solid green;
}
.slider2 {
height:60px;
border:1px solid green;
}
Thank you
something like this? added float: left; to slider1 also you miss spelled slider1 in css
.slider1 {
height: 50px;
border:1px solid blue;
overflow: hidden;
float: left;
background: blue;
}
http://jsfiddle.net/fa308n2b/
check your class name
.slder1 {
height: 50px;
border:1px solid green;
}
.slder1 It should be .slider1
Related
Is there a possibility for the div (#contentwrapper) to take all the remaining width while floating side by side for the next example:
#maincontainer {
width:1000px;
height: 100%;
display:inline-block;
}
#leftcolumn {
float:left;
width: 100px;
height:20px;
background: blue;
}
#contentwrapper {
float:right;
width:900px;
height: 20px;
background-color: red;
}
<div id="maincontainer">
<div id="leftcolumn"></div>
<div id="contentwrapper"></div>
</div>
JsFiddle
Try using flexbox. It is better than using tables. Make sure to include the vendor prefixes in it.
https://jsfiddle.net/qa6cds9c/
<div id="maincontainer">
<div id="leftcolumn"></div>
<div id="contentwrapper"></div>
</div>
#maincontainer {
border: 1px solid red;
display: flex;
}
#leftcolumn {
border: 1px solid blue;
height: 400px;
width: 100px;
}
#contentwrapper {
border: 1px solid green;
height: 400px;
flex: 1;
}
It's really simple. Using good ol' CSS:
float-left only the left element
add margin-left to the right column to compensate the left's one width:
#leftcolumn {
float:left;
width: 100px;
background: blue;
}
#contentwrapper {
margin-left: 100px; /* same as #leftcolumn width */
background: red;
}
<div id="maincontainer">
<div id="leftcolumn">left</div>
<div id="contentwrapper">right<br>contentwrapper</div>
</div>
You could use a table instead of The divs. Or make the divs behave as a table using CSS.
When you have two table cells in a row and set the width for one then the other will fill the remaining space.
Not sure if this is considered best practice though.
im new to this site, and html/css aswell. Im trying to make some simpel stuff here, but im already stuck at this.
Please have a look at this: http://jsfiddle.net/SoronSR/u6GEh/
HTML:
<body>
<div id="container">
<div id="column1-wrap">
<div id="column1">Column 1</div>
</div>
<div id="column2">Column 2</div>
<div id="clear"></div>
</div>
</body>
CSS:
#container {
border:5px solid #990000;
border-radius:10px;
}
#column1-wrap {
float: left;
width: 100%;
}
#column1 {
background-color: cyan;
margin-right: 200px;
}
#column2 {
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
}
#clear {
clear: both;
}
The background color is overlapping the border at the edges. I want the background color to stay within the border. Can anyone help me with this?
Simply add overflow:hidden to #container
Demo Fiddle
Note you can also accomplish what you want in a far simpler way:
Demo Fiddle
HTML
<div id="container">
<div id="column2">Column 2</div>
<div id="column1">Column 1</div>
</div>
CSS
#container {
border:5px solid #990000;
overflow:hidden;
border-radius:10px;
}
#column1 {
background-color: cyan;
overflow:hidden;
}
#column2 {
background-color: lime;
float: right;
width: 200px;
}
Is this what you want?
JSFiddle
Complete CSS:
#container {
border:5px solid #990000;
border-radius:10px;
}
#column1-wrap {
float: left;
width: 100%;
}
#column1 {
background-color: cyan;
margin-right: 200px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
#column2 {
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
#clear {
clear: both;
}
Please check: http://jsfiddle.net/u6GEh/4/
#container {
margin-top:80px;
border:5px solid #990000;
border-radius:10px;
height:30px;
padding:10px;
}
. I think you can get the idea how padding's are making a distance of your background to the border. Change the values until you are happy.
I am having some trouble with div positioning. I'm working on a comment system in wich comments can get upvotes and downvotes. For every comment the up/down vote-buttons needs to be left of my comment text, and vertically aligned in the middle of my comment-container div. (regardless of how big the comment is)
At the moment it wont work properly, because the buttons wont get to the middle of the div. (see: http://jsfiddle.net/mcSfe/1838/)
In the testcase i want the leftside to be stretched all the way down, and the red box vertically centered in the middle of the leftside. vertical-align, and display:table-cell, did not brought the right result..
Here is my test html code:
<div class="commentContainer">
<div class="leftside">
<div class="innerleft">
test
</div>
</div>
<div class ="CommentBox">
<p>hello</p>
<p>this is my comment</p>
<p>another line of comment</p>
</div>
and here is my test css code:
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
float:left;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
float:right;
width:200px;
background-color:green;
}
Remove float from .commentbox and .leftside and add display:table-cell with vertical-align:middle
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
width: 50px;
background: gray;
text-align: center;
display: table-cell;
vertical-align: middle
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
width:200px;
background-color:green;
display: table-cell
}
DEMO
LIke this
demo
css
div.commentContainer{
float:left;
border:1px solid blue;
display:table;
}
div.leftside {
display:table-cell;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
width: 25px;
height: 25px;
margin-left:13px;
background: red;
vertical-align:middle;
}
div.CommentBox {
display:table-cell;
width:200px;
background-color:green;
}
Inside of using floats, use inline-block.
JSFiddle
CSS
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
display:inline-block;
vertical-align:middle;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
display:inline-block;
vertical-align:middle;
width:200px;
background-color:green;
}
Issues regarding inline-block whitespace can be addressed separately.
I have all my divs necessary for my tic tac toe game, however I can't seem to find a simpler way to make a grid and not have any borders so it's just a grid and not 9 full squares... I think it's an issue in CSS.
<html>
<head>
<title>First Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div class="Row1">
<div id="cell1"></div>
<div id="cell2"></div>
<div id="cell3"></div>
</div>
<div class="Row2">
<div id="cell4"></div>
<div id="cell5"></div>
<div id="cell6"></div>
</div>
<div class="Row3">
<div id="cell7"></div>
<div id="cell8"></div>
<div id="cell9"></div>
</div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
</body>
</html>
HERE IS THE CSS, I HAVE 9 BOXES I NEED A GRID, HOW DO I DO THAT?
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.wrapper {
width: 330px;
margin:0 auto;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.row1, .row2, .row3 {
clear:both;
}
#cell1,#cell2,#cell3 {
width:100px;
height:100px;
border:3px solid black;
float: left;
}
#cell4,#cell5,#cell6 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
#cell7,#cell8,#cell9 {
width:100px;
height:100px;
float: left;
border:3px solid black;
}
Not 100% sure what your saying but lets have a look.
Here we have a grid for "tic tac toe", you can use float: left; to put 9 boxes into one container to line up these boxes in a row (3 a row due to width: 100px; and the overall container width: 300px;)
HTML:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
div {
width: 300px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
outline: 1px solid;
float: left;
}
DEMO HERE
Now if we want the border like when you normally play the game lets do something like this:
CSS:
div {
width: 310px;
height: 600px;
}
div div {
width: 100px;
height: 100px;
float: left;
}
div div:nth-child(-n+3) {
border-bottom: 1px solid;
}
div div:nth-child(-n+6) {
border-bottom: 1px solid;
}
div div:nth-child(1), div:nth-child(2), div:nth-child(4), div:nth-child(5), div:nth-child(7), div:nth-child(8) {
border-right: 1px solid;
}
Note that its early in the morning and there could be a better was to get that layout, brain not be fully working yet. But that is a way that will work.
DEMO HERE
NOTE: Only just seen I set the height: 600px; for some reason, you can lower that to fit the box.
Update:
Your code with easier grid:
HTML:
<h1>Tic Tac Toe</h1>
<div class="wrapper">
<div class="gameboard">
<div></div>
<div class="leftright"></div>
<div></div>
<div class="updown"></div>
<div class="middle"></div>
<div class="updown"></div>
<div></div>
<div class="leftright"></div>
<div></div>
</div>
<div class="button">
<button>New Game</button>
<button>End Game</button>
</div>
</div>
CSS:
.wrapper {
width: 330px;
margin:0 auto;
}
.gameboard {
width: 330px;
height:310px;
border:3px solid white;
z-index: 1;
}
.gameboard div {
width: 100px;
height: 100px;
float: left;
}
.middle {
border: 1px solid;
}
.button {
background-color:white;
width: 160px;
margin:0 auto;
}
.updown {
border-top: 1px solid;
border-bottom: 1px solid;
}
.leftright {
border-left: 1px solid;
border-right: 1px solid;
}
So to make it easier for you, I have based it around your code and put in an easier grid. Using classes I made to set the borders that create the layout of the game board.
DEMO HERE
You make a 3 × 3 grid in HTML and CSS by writing a 3 × 3 HTML table and setting the dimensions of its cells in CSS. It is absurd not to use a table for a tic tac toe grid, which is a tabular structure if there ever was one.
<style>
td { width: 1em; height: 1em; line-height: 1 }
</style>
<table>
<tr><td><td><td>
<tr><td><td><td>
<tr><td><td><td>
</table>
You normally don’t need id attributes here, as you can refer to cells by their structural position, both in CSS and JavaScript, unless you need to support ancient browsers.
The details depend on the detailed requirements. Now the question says “not have any borders”, yet the CSS code clearly sets borders.
Like #NoobEditor said in his comment: show us what you've tried so far next time.
You can achieve this by using divs floated next to each other, acting as columns.
Inside those divs you add more divs acting as rows.
CSS
.column{
float: left;
width: 70px;
height: 70px;
border: 1px solid blue;
overflow: hidden;
}
.row{
width: 68px;
height: 25px;
border: 1px solid red;
}
Example here.
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.