I want a normal div for the body of my text and a bunch of little divs that are exactly 150px by 150px. How might i do this?
This is a fairly trivial effect to accomplish. One way to achieve this is to simply place floated div elements within a common parent container, and set their width and height. In order to clear the floated elements, we set the overflow property of the parent.
<div class="container">
<div class="cube">do</div>
<div class="cube">ray</div>
<div class="cube">me</div>
<div class="cube">fa</div>
<div class="cube">so</div>
<div class="cube">la</div>
<div class="cube">te</div>
<div class="cube">do</div>
</div>
The CSS resembles the strategy outlined in the first paragraph above:
.container {
width: 450px;
overflow: auto;
}
.cube {
float: left;
width: 150px;
height: 150px;
}
You can see the end result here: http://jsfiddle.net/Qjum2/2/
Browsers that support pseudo elements provide an alternative way to clear:
.container::after {
content: "";
clear: both;
display: block;
}
You can see the results here: http://jsfiddle.net/Qjum2/3/
I hope this helps.
You can also hard code in the dimensions in your html code as opposed to putting the desired dimensions in a style sheet
<div id="mainDiv">
<div id="mydiv" style="height:150px; width:150px;">
</div>
</div>
As reply to Jonathan Sampson, this is the best way to do it, without a clearing div:
.container { width:450px; overflow:hidden }
.cube { width:150px; height:150px; float:left }
<div class="container">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
.myDiv { height: 150px; width 150px; }
<div class="mainDiv">
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</div>
<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>
css:
.smallDiv { height: 150px; width: 150px; }
You can set the height and width of your divs with css.
<style type="text/css">
.box {
height: 150px;
width: 150px;
}
</style>
Is this what you're looking for?
Related
I have four tabs developed with HTML5/CSS3/JS shown below.
I have used display:inline-block; for tab divs and text-align:center for their parent div to locate all four tabs at the center of the page.
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3:
.parent{text-align:center;}
.tabItem{display:inline-block;}
Now I want to locate two of the tabs i.e. YOU and HELP at the right-side of the page, and the rest of the tabs i.e. DATABASE and TASKS at the center of the page. I wonder how I can do that.
It's preferred to have div elements follow the natural flow of the page.
Do something like this
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right{float:right;}
.left{float:left;}
<div class='parent'>
<div class='tabItem left'>Content for Left</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem right'>YOU</div>
<div class='tabItem right'>HELP</div>
</div>
here is your solution!
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right {
float: right;
}
<div class='parent center'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='parent right'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>HELP</div>
</div>
</div>
Hope this helps!!
<html>
<head>
<style>
.parent{text-align:center;}
.tabItem{display:inline-block;}
#right {float: right;}
</style>
</head>
<body>
<div class='parent'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div id="right" class='tabItem'>YOU</div>
<div id="right" class='tabItem'>HELP</div>
</div>
</body>
</html>
Or just put those two divs in a parent container and give it an id="right" to avoid repeating id !!
I think you will need to set the tabs you need to relocate to absolute position, so they will be out of the normal content flow, then you can truly center the other two tabs.
.parent {
background: pink;
text-align: center;
position: relative;
}
.tabItem {
margin: 0 5px;
display: inline-block;
background: aqua;
}
.tabItem:nth-child(1) {
position: absolute;
right: 50px; /* width of "HELP" tab */
}
.tabItem:nth-child(4) {
position: absolute;
right: 0;
}
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3 feature display:flex is an option too. Can play around with it to see if it would work.
.parent{
display:flex;
justify-content:center;
}
.item{
padding: 10px;
text-transform:uppercase;
}
.right{
margin-left:auto;
}
.left{
margin-right:auto;
}
<div class="parent">
<div class="item left">you</div>
<div class="item">database</div>
<div class="item">tasks</div>
<div class="item right">help</div>
</div>
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a lot.
#main {
position: relative;
}
#right {
float: right;
position: relative;
display: inline-block;
}
#left {
float: left;
position: relative;
displayLinline-block;
}
#subDiv {
position: relative;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
browser shows:
<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
what's my mistake?
You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>
It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-block".
I'm having trouble making my work neater. I'm really trying to learn how to simplify my efforts. But I start first with putting everything on the screen and then div'n the elements out. After I've seen all my elements, I tackle the css.
.left {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: left;
height: 400px;
width: 33%;
}
.middle {
position: relative;
margin: 50px 3px 10px 3.5px;
float: left;
height: 400px;
width: 33%;
}
.right {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: right;
height: 400px;
width: 33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter</p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>
Link to see it work on jsFiddle --
http://jsfiddle.net/a1ynzr7p/1/
<div id="header">
<p id="logo"> GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="evenThree" id="preview">LEFT
</div>
<div class="evenThree" id="preview">MIDDLE
</div>
<div class="evenThree" id="preview">RIGHT
</div>
<div id="footer">
</div>
CSS
.evenThree{float:left; width:33%;}
Another solution would be to use display:flex; on the parenting container of those three items.
http://jsfiddle.net/kqxyqL0f/3/
.contentWrapper {
display:flex;
}
.column {
width:33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter
<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="contentWrapper">
<div class="column" id="preview">TESTING LEFT</div>
<div class="column" id="preview">TESTING MID</div>
<div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>
Are you trying to create three columns (aligning div's horizontally)? You can simply wrap each column (left, middle and right) with a class that applies: float:left and width:33%.
As seen here: jsfiddle
.col-3 {
float:left;
width:33%;
}
<div class="row">
<div class="col-3">Left</div>
<div class="col-3">Middle</div>
<div class="col-3">Right</div>
</div>
Also some tips to help your code:
ID's are non re-usable, don't repeat them throughout the code. Either change them to a class or change the ID to be unique.
Make sure all the <li> elements are wrapped in a <ul> or <ol> tag
You can also do these two things. See the boxes 1 - 3, they're using DIV with CSS display: table-cell. Easier to get the contents inside centered in the box. The DIV containing Boxes 4, 5, and 6 are using display: inline-block - they're more flexible with using margins between them, but, you'll have to do something special to make the text go center (wrap it in <span>).
Or you can learn Twitter-Bootstrap (look it up). You'll be far better off with it when applying layouting for websites especially when your requirements are to make it mobile friendly.
.container {display: table;margin-bottom:30px}
.set {
display:table-cell;
width: 200px;
height: 200px;
text-align:center;
vertical-align:middle;
padding:10px;
background-color:#9a9a9a;
border:1px solid #444;
}
.set2 {
display:inline-block;
width:140px;
height:90px;
text-align:center;
background-color:#A75b5b;
margin: auto 10px;
border:1px solid #444;
}
<div class="container">
<div class="set">Box 1</div>
<div class="set">Box 2</div>
<div class="set">Box 3</div>
</div>
<div class="set2">Box 4</div>
<div class="set2">Box 5</div>
<div class="set2">Box 6</div>
Quite a simple problem, but I can't seem to find a solution (using pure css, I'd like to avoid things like Isotope). I have a 2 column grid, the divs displayed inline-block so they fill the .wrap div, problem is though because the divs have variable heights, there are massive gaps below the divs in the right hand column.
jsFiddle demo: http://jsfiddle.net/neal_fletcher/ntyLg/
HTML:
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
CSS:
.wrap {
position: absolute;
width: 500px;
height: auto;
}
.test {
width: 240px;
background-color: orange;
display: inline-block;
vertical-align: text-top;
margin-bottom: 5px;
}
.test:nth-child(odd) {
height: 200px;
}
.test:nth-child(even) {
height: 100px;
}
Any CSS only solutions to such a problem? Any suggestions would be greatly appreciated!
As it is you don't actually have two columns, so you need something like this:
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
</div>
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
</div>
Fiddle
Here is it working with different css
Or you could have a .column class if you wanted:
<div class="wrap">
<div class="column">
<div class="test"></div>
<div class="test"></div>
</div>
<div class="column">
<div class="test"></div>
<div class="test"></div>
</div>
</div>