How to create this html layout using div tags? I'm trying this code. But it is not working. How should i position my leftbottom div? What is wrong on my code? Please help me......... Hurry..... thanks
<html>
<head>
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
}
.leftupper{
width: 350px;
height: 241px;
background: red;
float: left;
clear: right;
}
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.leftbottom{
width: 350px;
height: 200px;
float: left;
background-color: red
}
</style>
</head>
<body>
<div class="container">
<div class="leftupper">
</div>
<div class="gallery"></div>
<div class="leftbottom"></div>
</div>
</body>
</html>
Try to change
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
To
.gallery{
width: 630px;
height: 600px;
background: red;
float: right;
margin-left: 10px;
margin-right: 10px;
}
http://jsfiddle.net/tuekdzph/1/
You should use coloumns like this:
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
overflow: auto; /* clear floats */
}
.left { float: left; width: 350px; }
.right { float: left; width: 630px; }
.left-upper{
width: 100%;
height: 241px;
background: red;
}
.gallery{
width: 100%;
height: 600px;
background: red;
}
.left-bottom{
height: 200px;
background-color: red
}
</style>
Your HTML should look like this:
<div class="container">
<div class="left">
<div class="left-upper"></div>
<div class="left-bottom"></div>
</div>
<div class="right">
<div class="gallery"></div>
</div>
</div>
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 created three columns spread across 90% of the width page width and also centred on the page using "margin: auto". I wanted to have the three columns of equal width with equal spacing in between but was unable to achieve my desired result. How would I ago about doing this?
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
}
.c1 {
float: left;
width: 30%;
height: 70%;
background-color: green;
}
.c2 {
float: right;
width: 30%;
height: 70%;
background-color: #DDDDDD;
}
.c3{
float: right;
width: 30%;
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
You can use flex box to easily achieve this, here is the css for the desired result which also keeps it fully responsive.
here is a more detailed explanation on flex box and what you can achieve
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
display:flex;
justify-content:space-between;
}
.c1 {
width: 30%;
height: 70%;
background-color: green;
}
.c2 {
width: 30%;
height: 70%;
background-color: #DDDDDD;
}
.c3{
width: 30%;
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
You can remove float and make them as inline-block, and then center the elements present in the ColumnContainer.
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
text-align: center;
}
.ColumnContainer > div{
display:inline-block;
width:30%;
}
.c1 {
height: 70%;
background-color: green;
}
.c2 {
height: 70%;
background-color: #DDDDDD;
}
.c3{
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
How do I align div to the bottom of another div in HTML?
And why it doesn't work?
HTML:
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
CSS:
#big {
background-color: red;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
display: inline-block;
position: absolute;
bottom: 0px;
margin: 10px;
display: inline-block;
}
Your question is unclear but do you mean like this?..
#big {
display:table-cell;
position:relative;
vertical-align:bottom;
background-color: red; margin: 10px; width: 800px; height: 300px;
}
.small {
display: inline-block;
width: 150px; height: 150px; background-color: blue;
margin: 10px;
}
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
This will work:
http://jsfiddle.net/4f4ejwr0/5/
#big {
background-color: red;
margin: 10px;
position: relative;
height: 300px;
}
#bottom {
position: absolute;
bottom: 0px;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
margin-left: 10px;
}
<div id="big">
<div id="bottom">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
</div>
is this what youre looking for? http://jsfiddle.net/swm53ran/94/
should be changed to
position: relative;
Add the following to your CSS Class:
bottom:0 !important;
and remove the position portion.
Try this
#big {
background-color: red;
margin: 10px;
width: 150px; //new line
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
position: relative; // new line
margin: 10px;
}
Live jsfiddle
Update: This is ok ? Jsfiddle
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/
What would be the best way to do the following "speech bubbles" in html/css?
Thanks!
Here is a JSFiddle with what you want
http://jsfiddle.net/CDksf/4/
CSS:
.bubble_wrap {
overflow: auto;
width: 520px;
margin-bottom: 10px;
float: left;
}
.bubble_wrap .bubble_image {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin-right: 20px;
}
.bubble_wrap .bubble_content {
width: 400px;
height: 100px;
background-color: blue;
float: right
}
.bubble_wrap.bubble_right {
float: right;
}
.bubble_wrap.bubble_right .bubble_image {
float: right;
margin-right: 0px;
margin-left: 20px;
}
.bubble_wrap.bubble_right .bubble_content {
float: left;
}
HTML:
<div class="bubble_wrap">
<div class="bubble_image"></div>
<div class="bubble_content"></div>
</div>
<div class="bubble_wrap bubble_right">
<div class="bubble_image"></div>
<div class="bubble_content"></div>
</div>
<div class="bubble_wrap">
<div class="bubble_image"></div>
<div class="bubble_content"></div>
</div>