I want to make a group of buttons or spans that always fit in 6 places of screen (sorry I draw it not really straight). Thanks for your helping first.
.row__main{
max-width:280px;
margin:0 auto;
content:"";
display: block;
clear:both;
height:110px;
padding:0 15px 0 15px;
border: 1px solid black;
}
[class^="col-"]{
float:left;
}
[class^="col-"]:not(:last-child){
margin-right: 60px;
}
.col-1-of-3{
margin-top:23px;
width:calc((100% - 2*#{60px})/3);
}
<div class="row__main">
<div class="row-1">
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
</div>
<div class="row-1">
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
<div class="col-1-of-3"><button>button</button></div>
</div>
</div>
Related
I'm trying align two tables side by side in a floated left div. I think I've got how to horizontally align divs in general with floats but in my example below, once I create 3 columns, all floated left, I can't get the two tables in the 3rd column in the div.nestedHorizontalTables to display side by side. I tried display:inline-block but they still keep stacking vertically.
html
<div class="main-content">
<div class="column1">
<table>table1</table>
</div>
<div id="column2">
<!--I want a group of 4 vertical pie charts here-->
<div id="pie1"></div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
</div>
<div id="column3">
<div class="nestedHorizontalTables">
<table id="tab2">table2</table>
<table id="tab3">table3</table>
</div>
<table>Table4</table>
<div class="nestedHorizontalPieAndTable">
<table>table5</table>
<div id="pie6"></div>
</div>
</div>
</div>
css
#column1{
float:left;
width:40%;
}
#column2{
float:left;
width:20%;
}
#column3{
float:left;
width:40%;
}
.nestedHorizontalTables{
display:inline-block;
}
#tab2{
width:80%;
}
#tab3{
width:20%;
}
thanks
.main-content
{
margin:0;
padding:0;
float:left;
width:100%;
}
.column1 {
margin:0;
float: left;
width: 40%;
}
#column2 {
margin:0;
float: left;
width: 20%;
}
#column3 {
margin:0;
float: left;
width: 40%;
}
.nestedHorizontalTables {
display: inline-block;
}
#tab2 {
width: 80%;
}
#tab3 {
width: 20%;
}
<div class="main-content">
<div class="column1">
<table>table1</table>
</div>
<div id="column2">
<!--I want a group of 4 vertical pie charts here-->
<div id="pie1">hello</div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
</div>
<div id="column3">
<div class="nestedHorizontalTables">
<table id="tab2">table2</table>
<table id="tab3">table3</table>
</div>
<table>Table4</table>
<div class="nestedHorizontalPieAndTable">
<table>table5</table>
<div id="pie6"></div>
</div>
</div>
</div>
You may try this
If you just want the two tables inside nestedHorizontalTables to be displayed side by side, add float:left to both.
#tab2 {
width:80%;
float:left;
}
#tab3 {
width:20%;
float:left;
}
Here is a jsFiddle to help you.
Consider the follwoing html code:
<h3>CPU Plot </h3>
<div id="CPU1"></div>
<h3>CPU Plot </h3>
<div id="CPU2"></div>
<h3>CPU Plot </h3>
<div id="CPU3"></div>
<h3>CPU Plot </h3>
<div id="CPU4"></div>
CSS goes like this:
#CPU1{
width:600px;
height:300px;
margin-top: 20px;
float:left;
}
#CPU2{
width:600px;
height:300px;
margin-top: 20px;
float:right;
}
#CPU3{
width:600px;
height:300px;
margin-top: 20px;
float:left;
}
#CPU4{
width:600px;
height:300px;
margin-top: 20px;
float:right;
}
I need to place all the four divs side by side, i.e. CPU1 and CPU2, beside each other and in the next line CPU3 and CPU4 (beside each other).
But it is not organised. My CPU1 tag is not inline with CPU2 tag, but when I remove the <h3> tag then all the divs are inline.
How can I have the title on the div tags?
An image for your reference. Click Here
I need this but with Title: Required
You should add the inside the DIV. Such as:
<div id="CPU1">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
<div id="CPU2">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
<div id="CPU3">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
<div id="CPU4">
<h3>CPU Plot </h3>
<div class="add_graph_here"></div>
</div>
However, if your browsers width is wide enough (+1800px) the boxes will be plaxed incorrectly (according to your expectations).
For this reason, add in the CSS:
#CPU1{
width:50%;
height:300px;
margin-top: 20px;
float:left;
}
#CPU2{
width:50%;
height:300px;
margin-top: 20px;
float:right;
}
#CPU3{
width:50%;
height:300px;
margin-top: 20px;
float:left;
}
#CPU4{
width:50%;
height:300px;
margin-top: 20px;
float:right;
}
.add_graph_here { /*this represents your graph*/
height: 200px;
width: 200px;
background: #DDD;
border: 4px solid #ABABAB;
}
DEMO
Wrap divs in rows like
<div class="wrapper">
<div class="row">
<div id="CPU1"></div>
<div id="CPU2"></div>
</div>
<div class="row">
<div id="CPU3"></div>
<div id="CPU4"></div>
</div>
</wrapper>
give all CPU divs
float: left
and for row
.row {
float: left;
}
and for wrapper
.wrapper {
with: 1200px;
}
you can use float here. Take a look at this click me
You need to wrap your blocks and add "clear: left" to third block
HTML:
<div id="CPU1">
<h3>CPU Plot </h3>
<div></div>
</div>
<div id="CPU2">
<h3>CPU Plot </h3>
<div></div>
</div>
<div id="CPU3">
<h3>CPU Plot </h3>
<div></div>
</div>
<div id="CPU4">
<h3>CPU Plot </h3>
<div></div>
</div>
CSS:
#CPU1{
width:600px;
height:300px;
margin-top: 20px;
float: left;
}
#CPU2{
width:600px;
height:300px;
margin-top: 20px;
float: left;
}
#CPU3{
width:600px;
height:300px;
margin-top: 20px;
float: left;
clear: left;
}
#CPU4{
width:600px;
height:300px;
margin-top: 20px;
float: left;
}
then add your content to empty div's
<div id="CPU1" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU1" style="border:1px solid;"></div>
</div>
<div id="CPU2" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU2" style="border:1px solid;"></div></div>
<div id="CPU3" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU3" style="border:1px solid;"></div>
</div>
<div id="CPU4" style=" height:400px;">
<h3>CPU Plot </h3>
<div id="CPU4" style="border:1px solid;"></div>
</div>
just for example style according to your requirement.
I think this may help you:
HTML:
<div class="row">
<div id="CPU1">
<h3>CPU Plot </h3>
cpu1
</div>
<div id="CPU2">
<h3>CPU Plot </h3>
cpu2
</div></div>
<div class="row">
<div id="CPU3">
<h3>CPU Plot </h3>
cpu3
</div>
<div id="CPU4">
<h3>CPU Plot </h3>
cpu4
</div></div>
CSS:
#CPU1{
width:100px;
height:100px;
float:left;
display: inline-block;
}
#CPU2{
width:100px;
height:100px;
float:right;
display: inline-block;
}
#CPU3{
width:100px;
height:100px;
float:left;
display: inline-block;
}
#CPU4{
width:100px;
height:100px;
float:right;
display: inline-block;
}
.row{
width:300px;
clear:left;
}
http://jsfiddle.net/htevn7Ln/2/
You can also remove container rows and add "clear:left" to #CPU3.
I'm trying to create a navigation bar. The background consists of an image, and I'm using text placeholders until I have the links sorted. I cannot seem to get the text to appear on the navigation bar, rather they insist on appearing below in a list style.
An example:
The grey gradiented bar is intended to be the navigation bar.
HTML:
<div id="pagewrapper">
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center">
<div id="pagebanner">
<img src="img/banner.png" />
</div>
<div id="navibar">
<img src="img/navibar.png">
<div class="naviitems">
Home
</div>
<div class="naviitems">
PHolder1
</div>
<div class="naviitems">
PHolder2
</div>
<div class="naviitems">
PHolder3
</div>
<div class="naviitems">
Contact Us
</div>
</img>
</div>
<div id="pagecontent">
<h1>Oh no, I broke my elephant!</h1>
<p>Wiggle!</p>
</div>
</div>
</div>
And the corresponding CSS:
#container{
margin: 0 auto;
width:1017px;
text-align:center;
}
#left{
float:left;
width:160px;
height:900px;
background-color: #D8D8D8;
}
#right{
float:right;
width:160px;
height:900px;
background-color: #D8D8D8;
}
#center{
display: inline-block;
margin:0 auto;
width: 697px;
}
#pagebanner{
display: inline-block;
margin:0 auto;
width: 697px;
}
#navibar{
display: inline-block;
margin:0 auto;
width: 697px;
height: 27px;
}
.naviitems{
margin: 0 auto;
height:25px;
width:20%;
}
#pagecontent{
display: inline-block;
margin:0 auto;
width: 697px;
}
You need to set the background property of the parent DIV to the image instead of calling it using an IMG tag.
.navibar {
background:url(URLofImage)
}
I used
background: linear-gradient(180deg, #777, #eee);
instead of a background image, see if it fits your needs... jsfiddle
This has possibly been answered a couple of times before but I just can't find this answer to my specific problem.
I've been working on this: http://jsfiddle.net/LPGGh/
<div class="wrapper">
<div class="project">
<div class="media"></div>
<div class="text">Text</div>
</div>
<div class="project">
<div class="media"></div>
<div class="text">Text</div>
</div>
<div class="project">
<div class="media"></div>
<div class="text">Text</div>
</div>
.media{
width: 300px;
height:200px;
background-color:red;
margin-bottom:1em;
}
.text{
margin-bottom:2em;
}
.project{
display: inline-block;
margin-left: 1em;
margin-right: 1em;
}
.wrapper{
margin-top: 1.65em;
width: 100%;
}
My question is how I get the .media to auto fit in width so the red boxes always uses all of the space available and still keep the margins of course?
Thanks!
I used your fiddle, so the names are a little different in my answer.
Here is a solution by creating a wrapper for the media element:
<div class="project_container_parent">
<div class="project_container_child">
<div class="media_parent"><div class="media"></div></div>
<div class="text">Text</div>
</div>
<div class="project_container_child">
<div class="media_parent"><div class="media"></div></div>
<div class="text">Text</div>
</div>
<div class="project_container_child">
<div class="media_parent"><div class="media"></div></div>
<div class="text">Text</div>
</div>
</div>
And setting the css like this:
.media{
width:100%;
height:200px;
background-color:red;
margin-bottom:1em;
}
.media_parent{
margin-left:1em;
margin-right:1em;
}
.text{
margin-bottom:2em;
}
.project_container_child{
display: inline-block;
width:100%;
}
.project_container_parent{
margin-top: 1.65em;
}
Here is your modified fiddle: http://jsfiddle.net/LPGGh/13/
I have five columns which I aligned using display:inline-block It works fine, but there is one problem. When I refresh the page for about 4 or 5 times while the first column is on the top the other 4 columns go to the bottom of it and when I refresh again it gets back to its original place. I couldn't figure out what is causing this and the content inside the columns are coming from database. can someone give me hint?
CSS
.col1
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col2
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col3
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col4
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col5
{
display:inline-block;
vertical-align:top;
width:225px;
}
.col_content_wrap
{
background-color:#fff;
border:1px solid #ddd;
border-radius:5px 5px 5px 5px;
box-shadow:4px 4px 1px #eee;
margin-bottom:10px;
}
.imgwrap
{
height:169px;
position:relative;
width:223px;
}
.price_wrap
{
border-top:1px solid silver;
height:50px;
}
.price
{
float:right;
margin:10px;
}
HTML
<div clas="col1">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col2">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col3">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col4">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
<div clas="col5">
<div class="col_content_wrap>
<div class="imgwrap">image here
<div class="price_wrap"><div class="price">
</div>
</div>
</div>
</div>
You are missing an endquote for each of the <div class="col_content_wrap> elements.
Also, in each of your html blocks, you have 5 <div>'s and only 4 </div>'s