I'm an amateur with CSS and have tried using some guides to get myself so far. I've set up a fiddle http://jsfiddle.net/defaye/X9t7M/1/ for anyone who may know what I'm doing wrong? I can't get the sidebar on the right-hand side as a right-most column of the main content.
CSS structure
#wrapper {
width: 100%;
min-width: 950px;
max-width: 1110px;
margin: 0 auto;
}
#header {
float: left;
height: 354px;
width: 100%;
}
#navigation {
float: left;
height: 40px;
width: 100%;
}
#container {
float: left;
width: 100%;
}
#main {
margin-right: 200px;
}
#sidebar {
width: 300px;
margin-left: -300px;
float: left;
}
#footer {
height: 40px;
width: 100%;
clear: both;
}
HTML structure
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="container">
<div id="main"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
</body>
Take a look at this fiddle how it works. Here is your updated fiddle
#main, #sidebar {
float: left;
}
#main {
width: 70%;
}
#sidebar {
width: 30%;
}
Related
How do I make the image responsive and keep it in between the containers left and right.
I have tried putting it all into another container and it doesn’t work.
I know it sounds basic but it really is not.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="left"></div>
<div class="right"></div>
<img src="paintingOg.gif" style="width:50%">
How about this way? Is it (close to) what you need? Please check responsiveness too.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
.center {
height: 800px;
background-color: blue;
overflow: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://picsum.photos/500/500?gravity=west">
</div>
You don't need containers to center something.
It's better to use 1 container that contains everything.
If you want to center your image into a div just use this code:
<div align="center">
<image src="whatever.png"/>
</div>
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div align="center">
<img src="paintingOg.gif" />
</div>
I have two boxes each one is an inline-block i want to put two inline-block boxes underneath each other , like the following image
here's the code i used
.box1
{
background-color: red;
display: inline-block;
width: 300px;
float: right;
height: 31%;
}
.box2
{
background-color: green;
display: inline-block;
width: 324px;
float: right;
height: 31%;
}
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
In the second box clear your float. Just add clear: both.
Code Snippet:
.box1 {
background-color: red;
display: inline-block;
width: 300px;
float: right;
height: 31%;
}
.box2 {
clear: both;
background-color: green;
display: inline-block;
width: 324px;
float: right;
height: 31%;
}
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
You could wrap both your divs in a container and float that instead.
example
.container {
float: right;
}
.box1 {
background-color: red;
width: 300px;
height: 31%;
}
.box2 {
background-color: green;
width: 324px;
height: 31%;
}
<body>
<div class="container">
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>
</body>
Seems like you could just add a "clear: both;" to your second div and otherwise leave your code as-is.
.box1
{
background-color: red;
display: inline-block;
width: 300px;
float: right;
height: 31%;
}
.box2
{
background-color: green;
display: inline-block;
width: 324px;
float: right;
height: 31%;
clear: both;
}
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
I have a problem with making layout for my website. Basically, I don't know CSS, because of this can someone write a css for divs which will look like this? I haven't found any template which could solve my problem. I've found this
.left
{
float: left;
width: 15%;
}
.right
{
float:right;
width: 85%;
}
.right_bottom
{
float:right;
width: 85%;
height: 4%;
}
But it doesn't work
you can do like this : Fiddle
css code :
.mainDiv {
width:500px;
height:500px;
}
.topDiv {
height: 15%;
background-color: black;
}
.left {
float: left;
width: 15%;
height: 85%;
background-color:red;
}
.right {
float:right;
width: 85%;
height: 70%;
background-color:green;
}
.right_bottom {
float:right;
width: 85%;
height: 15%;
background-color:blue;
}
HTML code :
<div class="mainDiv">
<div class="topDiv"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right_bottom"></div>
</div>
Not that it'll really help, you'll need to know css but here you go.
header {
background: red;
height: 120px;
}
section, aside {
height: 1000px;
}
article {
height: 850px;
}
section {
background: blue;
}
aside {
float: left;
background: yellow;
width: 30%;
}
footer {
width: 70%;
background: green;
height: 150px;
float: right;
}
<section>
<header></header>
<aside></aside>
<article></article>
<footer></footer>
</section>
I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.
I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).
The layout I am looking for (on a black page) is:
I want this to remain in the centre of the page if the screen displays anything more than 800px wide
The HTML I have so far is:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="outerleftcolumn">Left Column</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="outerrightcolumn">Left Column</div>
<div id="footer">Footer</div>
</form>
</body>
The CSS I have so far:
body {
margin: 0px;
padding: 0px;
background-color:black;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
}
I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.
Any pointer would be appreciated.
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
#outerleftcolumn {
float: left;
width: 15px;
height: 700px;
background-color: red;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
background-color: red;
}
#centercolumn{
overflow: hidden;
}
form{
display: block;
margin: auto;
width: 800px;
background-color: #000;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 620px;
}
#content {
background: #fff;
float: left;
width: 620px;
height: 620px;
}
#anotherheader{
float: left;
width: 100%;
height: 50px;
background-color: yellow;
}
#footer {
background: #df781c;
height: 30px;
width: 800px;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="outerleftcolumn">Left Column</div>
<div id="outerrightcolumn">Left Column</div>
<div id="centercolumn">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">
<div id="anotherheader">
</div>
</div>
<div id="footer">Footer</div>
</div>
</form>
</body>
I tweak a little bit your code, getting rid of the outter columns:
HTML:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</form>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color:red;
width: 800px;
}
#header {
background: #438a48;
width: 770px;
height:50px;
margin: 0px 15px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
margin-left: 15px;
}
#content {
background: #ff6a00;
float: left;
width: 620px;
height: 700px;
margin-right: 15px;
}
#footer {
background: lightblue;
clear: both;
width: 770px;
margin: 0px 15px;
}
Here is a fiddle: http://jsfiddle.net/v81wdmgp/
I have a 2 column site: the left column is fluid and the right column is fixed. When I scale the browser in to check to see how the site responds the right column seems to collapse below the left column. I do not want this right column collapsing. I would like for the left main column to contract fluidly as the site is scaled in.
Here is the basics of my code: http://jsfiddle.net/kGkRD/
<section class="main">
Left
</section>
<aside class="sidebar">
Right
</aside>
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
section.main {
float: left;
max-width: 300px;
width: 100%;
background-color: red;
}
aside.sidebar {
float: right;
width: 200px;
background-color: blue;
}
<aside class="sidebar">
Hello World
</aside>
<section class="main">
Hello World123
</section>
CSS
#media (max-width:500px){
section.main {
//display:block;
float:right;
}
}
Fiddle
EDIT: Please use the updated css. try both using display:block and float:right.
Put your right floated element first, remove the float: left; and width: 100%; from the section.main and add overflow: hidden;: http://jsfiddle.net/mdares/kGkRD/1/
HTML:
<aside class="sidebar">
Hello World
</aside>
<section class="main">
Hello World
</section>
CSS:
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
section.main {
max-width: 300px;
background-color: red;
overflow: hidden;
}
aside.sidebar {
float: right;
width: 200px;
background-color: blue;
}
Update: Do I understand correctly and you are looking for this: http://jsfiddle.net/mdares/kGkRD/4/
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
section.main {
max-width: 300px;
width: 100%;
background-color: red;
overflow: hidden;
float: left;
}
aside.sidebar {
float: left;
width: 200px;
background-color: blue;
}
If so you were just missing your overflow: hidden;
UPDATE 2: To address your comment try this: http://jsfiddle.net/mdares/kGkRD/5/
CSS:
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
#container {
position: relative;
width: 100%;
}
section.main {
max-width: 300px;
width: 100%;
background-color: red;
overflow: hidden;
float: left;
}
aside.sidebar {
width: 200px;
background-color: blue;
position: absolute;
right: 0;
}
#media screen and (max-width: 350px) {
aside.sidebar {
position: static;
float: left;
}
}
HTML:
<div id="container">
<section class="main">
Hello World
</section>
<aside class="sidebar">
Hello World
</aside>
</div>