I am having a left div width a fixed width of 200 px, then I want the content area to take the space that is left. How can I solve that? I have done this...but it doesn't work.
#sidebar {
float:left;
width:200px;
height:100%;
background-color: blue;
}
#mainContent {
float:left;
width: // USE WHATEVER SPACE IS LEFT;
height:100%;
background-color: red;
}
Have a look at this code:
http://jsfiddle.net/Ffx8R/
CSS:
#sidebar {
float:left;
width:200px;
height:100%;
}
#mainContent {
padding-left:200px;
height:100%;
border:1px blue solid;
}
#container
{
height:200px;
clear:both;
}
HTML:
<div id="container">
<div id="sidebar">here is sidebar info</div>
<div id="mainContent">main Content info</div>
</div>
Related
I've looked at a bunch of websites, but none of them worked for me. I'm probably missing something really simple.
#container {
width:100%;
}
#one {
background-color:blue;
width:20%;
height:50%;
}
#two {
background-color:green;
width:20%;
height:50%;
}
#three {
background-color:yellow;
width:20%;
height:50%;
}
#four {
background-color:orange;
width:20%;
height:50%;
}
#five {
background-color:red;
width:20%;
height:50%;
}
This is what I want it to look like:
It doesn't display a lot, which I suspect is because of the height:50%...
Thanks in advance :)
You just need to add float left to each id in your container. This is a truncated version, no need to add the same css to each of your separate ids.
#container #one, #container #two, #container #three, #container #four, #container #five {
float:left;
}
or you can use display inline block
#container #one, #container #two, #container #three, #container #four, #container #five {
display:inline-block;
}
To center the divs if any space is left over you can add text align center to ensure the divs in your container are centered properly. This only works when using display block inline on your container.
#container {
text-align:center;
}
To put all the divs in the same line
use
display:inline-block;
if want to show divs in next line,
use
display:block;
default is set to block;
#container {
width:100%;
}
#one,#two,#three,#four,#five{
width:20%;
height:50%;
}
#one {
background-color:blue;
display:inline-block;
}
#two {
background-color:green;
display:inline-block;
}
#three {
background-color:yellow;
display:inline-block;
}
#four {
background-color:orange;
}
#five {
background-color:red;
}
<div id="container">
<div id="one">
One
</div>
<div id="two">
Two
</div>
<div id="three">
Three
</div>
<div id="four">
four
</div>
<div id="five">
five
</div>
</div>
Hope it helps
I've modified your code a bit but this should output what you are looking for.
You display the divs inline, and position them relatively with a slightly negative margin so that they take up 20% of the width each.
In a comment you mentioned you want to "make it exactly 50% tall", so you need to give the body 100% height, then set the divs to have 50% height:
html,
body {
height: 100%;
}
div {
display: inline-block;
width: 20%;
height: 50%;
position: relative;
margin: -2px;
}
#one {
background-color: lightblue;
}
#two {
background-color: green;
}
#three {
background-color: yellow;
}
#four {
background-color: orange;
}
#five {
background-color: red;
}
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
</div>
im not sure if that's what you're asking but maybe you just need
div{float:right;}
Try this:
#container {
width: 100%;
height: 300px;
border: 1px solid #000;
}
#container div {
width: 20%;
height: 50%;
float: left;
}
#element-1 {
background-color: red;
}
#element-2 {
background-color: blue;
}
#element-3 {
background-color: pink;
}
#element-4 {
background-color: yellow;
}
#element-5 {
background-color: green;
}
<div id="container">
<div id="element-1"></div>
<div id="element-2"></div>
<div id="element-3"></div>
<div id="element-4"></div>
<div id="element-5"></div>
</div>
I have helped in some way
This question already has answers here:
CSS side by side div's auto equal widths
(5 answers)
Closed 8 years ago.
In my layout in the main part of site I need two flexible columns. The height is known and always the same. But the width should be auto-increases with the width of the browser.
I need this because in div#1 should be different content (float right I supposed) and background than in div#2 (float left I supposed). Whole layout is increasing their width with browser (width 100%).
It would be easy to make if the background of div 1 and 2 is the same (wrapper + background set on parent) but in this example backgrounds are different. I do not know how to auto-increase the width of these two divs.
adjust the width parameter of div#1 and div#2
div #header {
display: block;
position: absolute;
top: 0px;
height: 100px;
}
div #div1 {
display: block;
position: absolute;
top: 100px;
width: 50%;
left: 0px;
}
div #div2 {
display: block;
position: absolute;
top: 100px;
width: 50%;
right: 0px;
}
this is what you want:
<div class="container">
<div class="header">
This is header
</div>
</div>
<div class="container">
<div class="div1">
This is left div
</div>
<div class="div2">
This is right div
</div>
</div>
<div class="container">
<div class="footer">
This is footer
</div>
</div>
.container{
max-width:960px;
padding:0 15px;
height:auto;
position:relative;
clear:both;
}
.header{
position:relative;
height:100px;
background-color:yellow;
width:100%;
display:block;
}
.div1{
position:relative;
height:400px;
background-color:pink;
width:50%;
float:left;
}
.div2{
position:relative;
height:400px;
background-color:green;
width:50%;
float:left;
}
.footer{
position:relative;
height:100px;
background-color:cyan;
width:100%;
display:block;
}
I've created a jsfiddle demo
What about a good, simple, semantic layout? The below uses positioning to maintain a fixed footer, here is an example without
Demo Fiddle
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
background:green;
height:50px;
}
footer {
bottom:0;
}
section {
top:50px;
bottom:50px;
width:50%;
background:yellow;
overflow-x:auto;
}
section:last-of-type {
background:blue;
left:50%;
}
Try this
#container{
width:100%;
clear:both;
}
#header{
width:100%;
}
#div1{
height:400px;
width:50%;
float:left;
}
#div2{
height:400px;
width:50%;
float:right;
}
#footer{
width:100%;
}
I have one DIV positioned right.
.right {
width:25%;
height:100%;
background-color:#000;
position:fixed;
right:0px;
z-index:1;
And left
.left {
width:25%;
height:100%;
background-color:#000;
position:fixed;
left:0px;
z-index:1;
And I'm trying to put this circle
.circle {
height:100px;
width:100px;
border-radius:50px;
background-color:#F00;
position:fixed;
left:45%;
z-index:99;
in the middle
this is my HTML
<div class="left">
</div>
<div class="centerc">
<div class="circle">
</div>
<div class="right">
</div>
What am I doing wrong and how do I fix it?
Your code seems to be working. However, the circle is off-center.
I suggest that you define the circle's position as 50% of the container's width minus 50% of the circle's width:
.circle {
...
width:100px;
left:50%;
margin-left:-50px;
}
Also, since everything is position:fixed, I don't see the purpose of div.centerc. I removed it.
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
Working example (jsFiddle)
Try to put this inside .circle styling:
left:50%;
margin-left:-50px;
left:50%; will put the left side of the .circle in the middle of the screen, then margin-left:-50px; will put the .circle 50px to the left (half of its width).
Also, it's a good idea to remove the non-closed .centerc div.
Demo
*{margin:0;}
body{
background:#fff;
}
.left{
position:fixed;
height:100%;
width:25%;
left:0;
background:#222;
}
.circle{
z-index:1;
position:fixed;
width:100px;
height:100px;
left:50%; /* Left side of the circle centered */
margin-left:-50px; /* A half of circle width to the left */
border-radius:50px;
background:#F33;
}
.right{
position:fixed;
height:100%;
width:25%;
right:0;
background:#222;
}
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
If you are meaning to have the left and right divs aligned and the circle div floating over them in dead center here's a quick fiddle to set you in that direction.
http://jsfiddle.net/Hastig/zLsbE/
I added a container div wrapped around all three (left, right and circle) and set it to position: relative
I then set the circle div to position: absolute and played with it's left and top alignment to center it.
Note - It's not a responsive solution.
.container {
width: 500px;
height: 250px;
position: relative;
}
.left {
float: left;
width: 250px;
height: 250px;
background-color: #000;
}
.right {
float: right;
width: 250px;
height: 250px;
background-color: #555;
}
.circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: #F00;
position: absolute;
top: 75px;
left: 200px;
}
<div class="container">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
http://jsfiddle.net/R8YRh/1/ demonstrates using:
.centerc {
text-align:center;
}
and the addition of display: inline-block; to .circle. This required the addition of top: 0; to .right.
.left {
width:25%;
height:100%;
background-color:#000;
position:fixed;
left:0;
z-index:1;
}
.right {
width:25%;
height:100%;
background-color:#000;
position:fixed;
right:0;
top: 0;
z-index:1;
}
.centerc {
text-align:center;
}
.circle {
display: inline-block;
height:100px;
width:100px;
border-radius:50px;
background-color:#F00;
z-index:99;
}
<div class="left"></div>
<div class="centerc">
<div class="circle"></div>
</div>
<div class="right"></div>
This should work. I just want that the nested div is in the center of the parent div.
Is this at least the correct approach to center something, or am I way off the standards?
I'm just beginning to build my websites.
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
position:absolute;
}
and the markup
<body>
<div id = "container">
<div id = logo><img src="img/johndoe.jpg" width="960" height="305"/></div>
</div><!-- end of container -->
</body>
Actually, the nested div is at the leftmost of the container.
Remove position:absolute; for the logo.
remove possition:absolute; from .logo
#container {
position:relative;
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
#logo {
width:960px;
height:305;
margin: 0 auto;
/*position:absolute;*/
}
Try checking out http://codepen.io/skeep/pen/nGupC
html
<div class="container">
<div class="logo"><img src="http://placehold.it/350x150" alt="" /></div>
</div>
css
.container {
width:980px;
height:900px;
margin:auto;
border:1px solid red;
}
.logo {
width:350px;
height:150px;
margin: 0 auto;
}
I have this HTML:
<div id="cont">
<div class="chatarea">
<div class="row">
<div class="message">
<div class="nick">
<p>Some Nick</p>
</div>
<p>Some Message</p>
<div class="timestamp"><p>Some Timestamp</p></div>
</div>
</div>
</div>
</div>
and this CSS:
#cont {
width:100%;
text-align:center;
}
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px;
width:80%;
}
.nick
{
width: 400px;
border-right-style: solid;
text-align: center;
height:100%; position:absolute; top:0; left:0;
}
.timestamp
{
width: 400px;
border-left-style: solid;
position:absolute; top:0; right:0; height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
im trying to display 3 divs (left and right smaller than the centre one) in the centre of the page. 80% of the browser width.
i have made a fiddle here: http://jsfiddle.net/zQ9pu/
im having a bit of trouble with it - what would be the best way to do this?
Just add
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}
It works fine !! here is ur new fiddle http://jsfiddle.net/zQ9pu/2/
Contain those divs in a parent block level element which has a specified width and then apply CSS margin-left: auto; margin-right: auto; on it.