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
Related
I have more than 6 divs and I want to set it with float left and one after another with auto resize as per the content size using css
As per image below
here is my code:
<div class="main-container">
<div class="container">
<div class="title">test1</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test2</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test3</div>
<div class="content">Testing of css html Short Content</div>
</div> <!-- And so on ... -->
</div>
any help will be appriciate. Thanks
You should use JQuery plugins like wookmark or masonry for what is you expected output. Using CSS you can not fill upper space.
You can also try http://suprb.com/apps/gridalicious/ which is very good using JQuery.
From all I know, you cannot achieve that using CSS only. The following CSS solutions are possible, but each of them fails to meet all your requirements.
float: left; with clearing
This is all you can achieve using float:
For that to work, you have to clear the float every 4th element. Recommendation is to use
.container:nth-of-type(3n+1) { clear: both; }
display: flex;
What you can achieve using display: flex; is similar, but all .container in one "row" will have the same height which will be determined by the "highest" .container.
CSS columns
The only way I know of to create a type of layout like you showed is using css colums. This does have the massive drawback that your containers will be stacked first in vertical order, and only if a column is filled the next .container will be pushed to the next column. So 2 will be below 1, not right of it.
Javascript-based solutions
As mentioned in another answer, there's a load of solutions available based on Javascript.
Find the two mentioned before here:
http://masonry.desandro.com/
http://www.wookmark.com/jquery-plugin
Add this style:
<style>
.main-container{
border:solid green 1px;
width: 500px;
height:200px;
}
.container{
border:solid gray 1px;
width:50px;
height:auto;
float:left;
}
</style>
By using height /width = auto can make your div flexible to its content as per your hint
hope this help.
I want to make two lines of divs. The divs are of different height. Like in the image bellow.
These divs are wordpress posts. They should go like this: first on the left, next one on the right, next one on the left etc.
Unfortunately, I can change only the style of the div that will contain the wordpress post. I cannot add html tags or make two columns in the html. So, can it be done only by styling the div element?
The divs don't have IDs,I have to get them with #container div{}
The only solution I found is this one:
div{float:left; width:345px; min-height:680px; max-height:680px;}
This works, but some of my divs are above 680px and they get on top of the others.
Assuming you want every other div pulled aside like this:
div:nth-child(2n+3) {
float:left;
}
div:nth-child(2n+4) {
float:right;
}
The +3 and +4 are assuming there are 3 divs before these you don't want to touch. This would need tweaking for your specific situation, but without seeing specific structure it's impossible to say anything for certain.
Try the following:
<div id="left-side">
<div class="pull-left">
</div>
<div class="pull-left">
</div>
<div class="pull-left">
</div>
</div>
<div id="right-side">
<div class="pull-left">
</div>
<div class="pull-left">
</div>
<div class="pull-left">
</div>
</div>
with the following CSS:
left-side {
float: left;
}
right-side {
float: right;
}
pull-left{
float: left;
}
So I'm trying to create a full width webpage, that when the browser scales down from a large display to medium, a sidebar collapses, then when the display is the width of the main content, the sidebar drops below the content (I'll explain with pictures).
I've created this JSFiddle: http://jsfiddle.net/7N2Jr/2/
In it there is a fixed sidebar - the main navigation.
Also there is the div.inside which holds all the content.
<article class="one"> holds the main content (the news article), while <article class="two"> will hold related posts, adverts, and the like.
What I intend to create is (excuse the fiddle not being large enough to show this):
The header remains the same size.
The <article class="one"> will have a width of 920px, or 46em (on a base 20px). It will remain this width until the browser window is 46em or less.
The <article class="two"> will fill up the remainder of the browser next to <article class="one">. When the width of <article class="two"> reaches a certain width it will drop the content into one column. Then when the width is 46em, it will drop below the content.
Check Bootstrap 3.0, it provides everything you're looking for!
as an example: in this case your HTML would look like this:
<div id='text' class='col-lg-6 col-sm-8 col-xs-12'>
put your text here
</div>
<div id='images' class='col-lg-6 col-sm-4 col-xs-12'>
<div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
<div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
</div>
Bootstrap uses a 12 column grid. For different screen sized (LG, SM, XS for instance) you can define how many of these columns a DIV takes up in that grid.
Like people above said , try instead using bootstrap framework.
However if you don't want that then just read about media queries.
You can start here: http://css-tricks.com/css-media-queries/
Here is an update to my JSFiddle: http://jsfiddle.net/7N2Jr/6/
After some tinkering, it got there.
Then when the images drop to the right side, under the main text I'll use the media-query to remove the margins
<edit> You could use float as a fallback for the flexbox http://jsfiddle.net/7N2Jr/8/ </edit>
If you do not mind using flexbox , for younger browser only, you could give it a try :
DEMO
.inside, article.two{
display:flex;
padding:1em;
flex-wrap:wrap;
}
.inside, article {
background:rgba(0,0,0,0.3);
margin:1em;
}
article.one {
flex:3;
min-width:800px;
}
article.two {
min-width:200px;
}
.filler {
min-width:200px;
min-height:80px;
margin:auto;
background:black;
margin:1em;
align-self:flex-start;
flex:1;
}
check it in different browser to find out if it suits your needs.
bootstrap can be used as a fallback for browser wich doesn't apply the flex rules.
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
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/