Since i am new to CSS, i am not sure if the following page layout is possible using Div/CSS or shall i use HTML table?.
i want to design my page such that, Left side (i.e around 30%) divide into 3 parts with some margin (i.e one Column and 3 rows) and rest of the page in 2 rows (i.e one Column and 2 rows).
Not sure if i could explained it properly. I have the image file but Stackflow does not allow me to upload because of less reputation.
You don't need to use <table> for the layout you described (and you won't need anything CSS3 or HTML5 specific).
There are a few options for implementing this layout. Here's a good tutorial on CSS layout:
CSS Layouts
Here is one example of your layout:
jsFiddle
HTML
<div class="left-column">
<div>Left Side Row 1</div>
<div>Left Side Row 2</div>
<div>Left Side Row 3</div>
</div>
<div class="right-column">
<div>Right Side Row 1</div>
<div>Right Side Row 2</div>
</div>
CSS
.left-column, .right-column{
float:left;
}
.left-column{
width:30%;
}
.right-column{
width:60%;
}
div{
padding:10px;
border:solid 1px black;
}
Screenshot of results
There is another way to make table by div/css
- html
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
css
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
Sounds like you either want a two-column or three-column layout. Here's a few links for understanding how to create either:
2-column:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
3-column:
http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/
Related
I have been using bootstrap responsive 12 column grid layout for my website.
I have the layout like follows (stripped down version for example purpose)
<div class='container-fluid'>
<div class='row'>
<div class='col-md-1'>
Left side contents go here
</div>
<div class='col-md-11'>
Right side contents go here
</div>
</div>
</div>
What I need now, is that the left side column is wider than what I want. How can I make it fixed-length narrow and still use Bootstrap layout?
Any help is appreciated!
A clean solution would be customizing bootstrap to have more columns, like this answer:
How to use bootstrap with 16 or 24 columns
Other alternative is using nested rows, but that could end up with problems like unused space, so my suggestion is customizing bootstrap.
you can make a nested row within a column
For eg-
<div class="row">
<div class="col-md-1">
<div class="row">
<div class="col-md-offset-9 col-md-3"><!-- offset-9 leave space in left and start in last three of column --></div>
</div>
</div>
<div class="col-md-11"></div>
</div>
The issue you're having is an issue with how grid systems work. What they're designed to do is describe a fixed set of column widths: the content of those columns should expand to fill them. What you want is the inverse of this: you want the content to define the width.
You've effectively got three good options, and in order from least -> best in terms of getting what you want with the simplest markup:
Live with it (or have more columns as suggested, say 24).
Put the two columns of content in a block[1], apply display:table; width: 100%;. Make the two child items display:table-cell, use white-space:nowrap on the left-hand one and make the right-hand one width: 99%.
Put the two columns of content in a block[1], apply display:flex, and apply flex:1 to the right-hand child item.
Flex is the best solution, but needs IE10+ if that's an issue.
.container {
max-width: 400px;
margin: 0 auto;
}
[class^="row-"] {
margin: 10px 0;
}
.row-1 {
display: table;
width: 100%;
}
[class^="col-1-"] {
display: table-cell;
}
.col-1-left {
white-space: nowrap;
}
.col-1-right {
width: 99%;
}
.row-2 {
display: flex;
}
.col-2-right {
flex: 1;
}
<div class='container'>
<div class='row-1'>
<div class='col-1-left'>Some content</div>
<div class='col-1-right'>Some content</div>
</div>
<div class='row-2'>
<div class='col-2-left'>Some content</div>
<div class='col-2-right'>Some content</div>
</div>
</div>
I'm trying to create a site layout using css and divs with the following criteria:
Top and bottom element must occupy 100% width
Top element is a single "table-cell"
Bottom element must be split vertically into 2 "table-cell" sub-elements, and all fit under the Top element (nothing sticking out and no space between)
It should be simple enough to do with table-styled divs, but I've been fiddling for hours trying to get the bottom element to quit copying its width from the leftmost cell in the top element. Please help!
Here is my jsfiddle
Note that the "STUFF" cell is pushing the next row's second column to the right. This prevents things from "fitting" underneath the top row.
HTML:
<div id="dvStructure_Outer">
<div id="dvStructure_Upper">
<div id="dvUperrCell">
STUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFF<br />
</div>
</div>
<div id="dvStructure_Lower">
<div id="dvDetailStructure_Left">
Lower Left<br />
</div>
<div id="dvDetailStructure_Right">
<div class="dvDetailSection">
Lower Right Right Detail 1<br />
</div>
<div class="dvDetailSection">
Lower Right Right Detail 2<br />
</div>
<div class="dvDetailSection">
Lower Right Right Detail 3<br />
</div>
</div>
</div>
</div>
STYLE
#dvStructure_Outer {
display:table;
min-width:500px;
border-color:red;
border:solid;
}
#dvStructure_Upper {
display:table-row;
border:dashed;
}
#dvStructure_Lower {
display:table-row;
border:dashed;
}
#dvUperrCell {
vertical-align:center;
display:table-cell;
border:dashed;
}
#dvDetailStructure_Left {
display:table-cell;
border:dashed;
}
#dvDetailStructure_Right {
display:table-cell;
width:400px;
border:dashed;
}
.dvDetailSection {
display:table-row;
border:dotted;
}
Unlike HTML tables, CSS tables do not have column or row spans. To make the top row span the distance of the 2 cells in the bottom row, the bottom cells were nested in an additional CSS table.
Here is a simplified JSFiddle Example: http://jsfiddle.net/TalkingRock/pewywx4y/ Notice how the top row now fills the entire width of the table.
Sitepoint has a book called "Everything You Know About CSS is Wrong" that covers CSS table layouts, and it states:
CSS tables lack any concept of row or column spanning, making it trickier to use one single layout structure than what might have been possible when using HTML tables. However, similar layouts can be achieved by using nested CSS tables.
HTML
<div class="table short-width">
<div class="table-row">
<div class="table-cell green"><p>Top Row</p></div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="table full-width">
<div class="table-row">
<div class="table-cell peach"><p>Bottom Row Left</p></div>
<div class="table-cell purple"><p>Bottom Row Right</p></div>
</div>
</div>
</div>
</div>
</div>
CSS
.table {display:table;}
.table-row {display:table-row;}
.table-cell {display:table-cell;}
.short-width {min-width:500px;}
.full-width {width:100%;}
.green {background-color:#ccffcc;}
.peach {background-color:#ffcccc;}
.purple {background-color:#ccccff;}
p {margin:0; padding:.5em;}
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
In an attempt to learn responsive web design, I am teaching myself how to design with bootstrap. I have created a basic grid; the code for the grid is shown below.
HTML:
<div class="row">
<div class="span6 red01">span6</div>
<div class="span6 green01">span6</div>
</div>
CSS:
body { padding: 0px; }
.red01 { background: #ff0000; }
.green01 { background: #00ff00; }
I can see the two divs on my web page, but my problem is with how they are aligned. I'd like to align them horizontally across my laptop's screen. I've tried fiddling with this, but can't get it to work. Could anyone please lend their expertise?
Please check this JSfiddle for you
See the result here Result of 2 col
<div class="container">
<div class="row">
<div class="span12">
<h1>Bootstrap 12 col spanning full page</h1>
</div>
<div class="span6">
<p> Paragraph test col1</p>
</div>
<div class="span6">
<p> Paragraph test col2.</p>
</div>
</div>
</div>
.container class -> Its a wrapper with fixed width , predefined in bootstrap.css .
.container-fluid -> which is fluid wrapper
.row --> This class is built to contain a row of columns. Each new row creates a new zone for laying out columns as desired.
I need to layout a site that has three columns in this order:
leftColumn | mainColumn | rightColumn
leftColumn and rightColumn are both advert columns, and the mainColumn section contains all the SEO-rich content.
Therefore in the code I have placed the divs used for the layout in the following order so that the main content is seen first for SEO benefit:
<div id="mainColumn">
</div>
<div id="leftColumn">
</div>
<div id="rightColumn">
</div>
I have also done it this way so that if the user is browsing the page from a mobile they will see the main content first, not the adverts.
So my question is, how do style the columns so that they display in the correct order?
This is an HTML5 / CSS3 page.
You can do something like this as a starting point:
<div id="mainColumn" class="column">1</div>
<div id="leftColumn" class="column">2</div>
<div id="rightColumn" class="column">3</div>
.column {
position:relative;
float:left;
width:25%;
}
#mainColumn {
width:50%;
left:25%;
}
#leftColumn {
left:-50%;
}
Demo: http://jsfiddle.net/bn3t8/
This code is very basic and probably requires IE fixes and support for full-height backgrounds on the columns. You might want to check out this site for some more defensive strategies (highly recommend):
http://matthewjamestaylor.com/blog/perfect-3-column.htm