I have the following HTML and CSS code, and I'm trying to create a class called about, such that columns and rows are defined as follows:
.about {
.column {
float: left;
width: 50%;
}
.row:after {
display: table;
clear: both;
}
}
<html>
<body>
<div class="about">
<div class="row">
<div class="column">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Data..</p>
</div>
</div>
</div>
</body>
</html>
However here the columns are stacked on top of each other, not side by side. If I remove column and row outside of .about, then it seems to work, but then they are not defined the the .about class. Any help here would be appreciated.
Thanks
Related
I am learning html and css and I need to add spacing between each pane being displayed. How would I do this?
I currently have the below code which creates two columns for me. That's as advanced as I know how to get :)
<body>
<div class="row">
<div class="column">
<canvas id="Top left"></canvas>
</div>
<div class="column">
<canvas id="Top right"></canvas>
</div>
</div>
<div class="row">
<div class="column">
<canvas id="Bottom left"></canvas>
</div>
<div class="column">
<canvas id="Bottom right"></canvas>
</div>
</div>
</body>
<style type="text/css">
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
you need to add margin: 10px of your .column. then you will get some space.
Hey you should try using padding and margin attribute of CSS and set margin-left=desired pixels and do the same with margin-right or use padding-right or left.I hope this answers your question
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
Hello I want to stylize this structure HTML with CSS , need to create 3 row . 1.header 2.maincontent 3.footer ! and i need to add a scrollbar for all mainpage , just 1 scrollbar not 1 per each row...
Like is on structure of code I want the style for header , maincontent and footer. Waiting for help.
<div id="header">
<div id="headerLeft">
<div class="msgs">Mesazh</div>
<div class="points">Points</div>
</div>
<div id="headerRight">
<div class="hungry">Hungry: </div>Action:
</div>
<div id="maincontent">
<div class="output">LALALALALALALA</div>
</div>
<div id="footer">
<div id="footerleft">
<div class="onlinePlayer">Klevi</div>
</div>
<div id="footerCenter">
<div class="map">harta</div>
<div class="forum">forumi</div>
<div class="logout">logout</div>
</div>
<div id="footerRight">
<div class="details">details</div>
<div class="inventory">inventory</div>
<div class="support">support</div>
</div>
</div>
</div>
You have already asked about the scrollbar 2 other times today.
The basic way to create a layout is using floats to display divs next to each other. You put these divs in a container. You can make the columns fluid with a percentage or fixed.
The HTML for the header would look like
<div class="row">
<div class="two cols">a</div>
<div class="one cols">s</div>
</div>
First css is for the row or container of the div.
.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #fff;
}
The second css is the base code for each type of column.
.col, .cols {
margin-left: 4.40%;
float: left;
min-height: 1px;
position: relative;
}
Below controls the width for the different columns
.col:first-child, .cols:first-child {
margin-left: 0px;
}
.row .one.cols {
width: 30.4%;
}
.row .two.cols {
width: 65.2%;
}
.row .three.cols {
width: 99.99999999999999%;
}
The example below is based on foundation by ZURB
http://jsfiddle.net/vmbm55fo/
I have the following html:
<div class="wrapper">
<h1>Ipods</h1>
<div class="main-topright-bottom">
<h1>Related Products</h1>
<div>Check items to add to the cart or select all.</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A red ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
<div class="relatedproduct">
<div class="relatedproductimage">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
</div>
<div class="relatedproducttext">
<div class="relatedproductheading">A blue ipod nano.</div>
<div class="price">$140.00</div>
<div class="addtowishlist">Add to Wishlist</div>
</div>
</div>
</div>
</div>
and css:
.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }
I want to know how come the blue background does not extend to the bottom div.
What am I doin wrong?
http://jsfiddle.net/johngoche99/C9NKP/2/
Thanks.
Floats aren't contained by default. You make it do this by floating the wrapper too, or giving it an overflow property.
.wrapper {
overflow: hidden;
}
jsfiddle demo
Read http://colinaarts.com/articles/float-containment/ for another (better) alternative if you don't want to hide overflow as a side-effect.
More information at https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context
change
.wrapper { background: blue; }
To
.wrapper { background: blue;overflow:hidden;}
I have the below html & class structure. It displays as expected in Firefox, but in IE 8 the rt-col is pushed to the following row. Any ideas on what could be wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...
...
<div id="main" class="container_12">
<div id="lt-col" class="grid_8">
...
</div>
<div id="rt-col" class="grid_4">
...
</div>
</div>
The CSS pertaining to the containers & grids are below:
#main:after, #lt-col:after, #rt-col:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
#main {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
Assuming you are trying to build a left and right column grid:
You need to define an explicit width for each column. Currently, you have none. And since you're using the "clear: both;" attribute and value on both columns, they'll simply display as rows.
Add this to your CSS (or some variation of widths) and your rows will turn to columns:
#lt-col {
float: left;
width: 50%;
}
#rt-col {
float: right;
width: 50%;
}
#clairesuzy I think the issue lies on the styling that is applied. There is some style that is adding a padding to either the main div or the rt-col and lt-col div
this can easily be sorted by using the below code to start with
<div class="container_12">
<div class="grid_8">
...
</div>
<div class="grid_4">
...
</div>
<div class="clear"></div>
</div>
this above will work out of the box irrespective of any styling...
then do this and ensure there is no padding
<div id="main">
<div class="container_12">
<div class="grid_8">
<div id="lt-col">...</div>
</div>
<div class="grid_4">
<div id="rt-col">...</div>
</div>
<div class="clear"></div>
</div>
</div>
simplified version of what you wish to do