I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.
This is my code, and i don't know how to solved the problem.
https://jsfiddle.net/x0qqtr2y/
<div id="main>
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
#main {
width:100%;
background:gray;
display:table;
position:relative;
}
.cell1 {
width:auto;
height:auto;
display:table-cell;
background:red;
float:left;
}
.cell2 {
width:auto;
height:auto;
display:table-cell;
float:left;
background:blue;
}
use display:flex; on the parent element example below
CSS
#main {
width:100%;
display:flex;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
HTML on your main make sure you close the quote marks
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
To learn more about flex use the link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would try this CSS, worked when I tried it in your Fiddle:
#main {
width:100%;
background:gray;
position:relative;
}
#main div {
display: inline;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
Hi Because u miss (") id="main" below code working fine check it
CSS
#main {
width:100%;
background:gray;
}
.cell1 {
background:blue;
float:left;
}
.cell2 {
float:left;
background:red;
}
Html
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSome</div>
<div class="cell2">SomeTEXTSomeTEXT1</div>
</div>
Related
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I'm trying to achieve the following layout:
Two side by side containers, the first container has a fixed width, second contaner stretches the entire length of the screen. The second container has a sub-container with a margin, that stretches the entire length of its parent container.
I've achieved this in the following way, but it looks clumsy and I think there's a better way, but I'm drawing a blank. Can you offer a better solution, if one exists?
http://jsfiddle.net/7Ack4/
CSS:
.c1 {
display: table;
width:100%;
height:40px;
border:2px solid black;
}
.c1> div:first-child {
display:table-cell;
width:100px;
background-color:blue;
}
.c1> div:last-child {
display:table-cell;
}
.c1 > div:last-child > div {
position:relative;
height:100%;
width:100%
}
.c1> div:last-child > div > div {
position:absolute;
left:5px;
right:5px;
bottom:5px;
top:5px;
background-color:red;
border-radius:10px;
}
HTML:
<div class="c1">
<div>
</div>
<div>
<div>
<div></div>
</div>
</div>
</div>
I don't think display: table-cell is right to go with here.
I used margin-left in combination with float property.
Check this fiddle
.c1 {
width:100%;
height:40px;
border:2px solid black;
}
.c1> div:first-child {
width:100px;
background-color:blue;
height: 100%;
float: left;
}
.c1> div:last-child {
margin-left: 100px;
height: 100%;
}
.c1 > div:last-child > div {
position:relative;
height:100%;
width:100%
}
.c1> div:last-child > div > div {
position:absolute;
left:5px;
right:5px;
bottom:5px;
top:5px;
background-color:red;
border-radius:10px;
}
It's crazy how much changes in 5 years. In case anyone finds this, here is the simplest solution as of April 2, 2020 - the year of coronavirus.
This is now all you need since flexbox arrived.
HTML
<div class="parent">
<div class="child-1">
</div>
<div class="child-2">
</div>
</div>
CSS
.parent{
background:blue;
padding:2px;
height:40px;
display:flex;
}
.child-1{
flex-basis:100px;
background:green;
}
.child-2{
background:yellow;
flex-grow:1;
}
Here's a codepen.
https://codepen.io/hundredbillion/pen/mdJgYja
I can divide a page into sections and give them separate colour using css as
.window:nth-child(1) {
background: #d5d7dd;
top: 0%;
}
.window:nth-child(2) {
background: #1babb7;
top: 100%;
}
Can I divide one of these 'child' into different columns and give them separate colour?
You've tagged HTML & CSS with this question, so here's some basic code to demonstrate how to create this.
Note: It seems you're new to HTML & CSS, so I encourage you to do some tutorials!
HTML:
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
CSS:
#container {
width:100%;
height:200px;
}
#one {
width:33.333%;
height:200px;
float:left;
background-color:red;
}
#two {
width:33.333%;
height:200px;
float:left;
background-color:yellow;
}
#three {
width:33.333%;
height:200px;
float:left;
background-color:blue;
}
Is that possible to do that only with HTML and CSS? Of cource, screen width can be various.
Yes you can do this with display:table property. write like this:
.parent{
width:100%;
display:table;
}
.parent div{
display:table-cell
}
.middle{
width:300px;
background:red;
}
.left{
background:green;
}
.right{
background:yellow;
}
Check this http://jsfiddle.net/QUVeq/
You can do it like in that example
http://jsfiddle.net/HCFpE/
add the width: auto; to your #left and #right css
<style type="text/css">
#wrapper{
width:100%;
float:left;
}
#left{
width:20%;
float:left;
}
#center{
width:60%;
margin:0 auto;
}
#right{
width:20%;
float:right;
}
</style>
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
Just how can I make my page look like this:
When the left, and right (the upper divs
When A and B's height is unknown (well, the one who has most content will decide on how down below C is)
Thanks in advance
I would make the sections percentages, that way you get these proportions no matter what screen size the user has.
CSS
#sectionA
{
float:left;
width: 20%;
}
#sectionB
{
float:left;
width: 80%;
}
#sectionB
{
clear:both;
width: 100%;
}
HTML
<div id="sectionA"></div>
<div id="sectionB"></div>
<div id="sectionC"></div>
http://jsfiddle.net/AHk78/
HTML
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>
CSS
#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }
CSS:
#divA
{
float:left;
width: <width of div A>;
}
#divB
{
float:left;
width: <width of div B>;
}
#divC
{
clear:both;
}
HTML:
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
You can make it inline with following example for right alignment:
<div style="width:30%;float:right"><!--write your required tags--></div>
Here width and float varies depending on the requirement
Something like this:
A
float: left
B
float: left;
C
clear: both;
Hi you can make this simply as like this
Css
#left {
width:100px;
min-height: 300px;
background:red;
float:left;
}
#right {
min-height:200px;
background:blue;
float:left;
width:400px;
}
#bottom{
height:200px;
background:green;
clear:both;
}
HTML
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
Live demo link here http://jsfiddle.net/rohitazad/AHk78/2/