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
Related
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
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
See my code at codepen
I'm trying to horizontally center the circle progress bar in the page, I tried setting margin: 0 auto; on the div, it didn't work. I, also, tried setting text-align: center on the parent div and setting the div to display: inline-block, no success as well.
This is the element in the HTML I'm trying to center:
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is the CSS I'm applying on the element:
.col-md-12{
width: 100%;
}
.timer{
width: 100%;
margin: 0 auto;
}
Remove float: left; or set it to none in .c100 css class.
.c100 {
float:none;
}
I think it should be like this.
<center>
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Replace your existing CSS rules with:
.col-md-12 {
text-align: center;
}
.timer {
display: inline-block;
}
<div class="timer"> <!-- this one should be centered -->
.timer{
width: 100%;
margin: 0 auto;
}
It is centered. It is also 100% wide, so being in the center is the same as being left or right aligned. It takes up all the space.
You need to set a smaller width in order for it to noticeably appear in the center.
Remove float: left;from .c100 class to center the div.
If that's what you wanted:
CodePen example
I added:
.timer {display: flex}
and also added a new class to it's only child
.align {margin: 0 auto !important;}
as .c100 overrides margins.
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/
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.