I can't figure out how a div can take the whole height of a container.
In the following exampe I'd like the "photo" div to take the full height, so that the yellow and green content are on the right of the photo.
Here is the code:
#header {
background-color:#7b88d2;
text-align:center;
height: 20px;
}
#container {
max-width:800px;
border-style: solid;
border-width: 1px;
}
#main {
width: 100%;
height: 100%;
}
#photo {
float:left;
background-color:#FF3366;
padding: 10px;
}
#logo {
float:right;
background-color:#FF3366;
padding-right: 10px;
height: 100%;
}
#footer {
background-color:#669933;
text-align:center;
height: 20px;
}
#col1 {
float: left;
padding-left: 10px;
}
#col2 {
margin-left:auto;
margin: 0 auto;
}
#txt_container {
padding-left: 10px;
background-color:#ffffcc;
}
#col3 {
display: inline;
float: right;
padding-right: 10px;
}
I can't declare the height in pixels because the height of the photo in unknow.
Demo here: https://jsfiddle.net/wsfnqvyn/
Thanks for your help.
Sounds like it's senseless. An image can be smaller or higher than your div (I don't know if it is relevant or not to what you are trying to explain). Try to use css background method instead.
e.g. Define the properties of your .photo class and then insert the code below to your html.
<div class="photo" style="background-image: url(image.jpg)"></div>
In this case, your .photo class should include this one line at least.
.photo {
background-size: cover;
}
Remember this method can restrict some CSS interactivity in rare cases.
I updated your jsfiddle : See the updated one: https://jsfiddle.net/wsfnqvyn/6/
I use display:table and table-cell to achieve this.
#header {
background-color:#7b88d2;
text-align:center;
height: 20px;
}
#container {
max-width:800px;
border-style: solid;
border-width: 1px;
}
#main {
width: 100%;
height: 100%;
display:table
}
#photo {
display:table-cell;
background-color:#FF3366;
padding: 10px;
}
#logo {
display:table-cell;
background-color:#FF3366;
padding-right: 10px;
}
#footer {
background-color:#669933;
text-align:center;
height: 20px;
}
#col1 {
float: left;
padding-left: 10px;
}
#col2 {
margin-left:auto;
margin: 0 auto;
}
#txt_container {
display:table-cell;
padding-left: 10px;
background-color:#ffffcc;
}
#col3 {
display: inline;
float: right;
padding-right: 10px;
}
Related
In the image below, on the left is the output of my html/css, on the right is what I would like the layout to look like.
I'm pretty clueless as to:
how to Center the header
why the 'upper right' text and button are being forced to the next line by the header (as opposed to orienting in the upper right
how to align the text area so that it is to the right of the image
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="outer_border">
<div class="inner_border">
<!--just use a div to represent the image -->
<div class ="image">
</div>
<span class="upper_left_text">
upper left
</span>
<span class ="header">
<h2>
Header
</h2>
</span>
<span class="upper_right_text">
upper right
</span>
<button class="button1">Button</button>
<textarea class="text_area">Text Area</textarea>
<button class="button2">Button 2</button>
</div>
</div>
</body>
</html>
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
float: right;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
.button1 {
float: right;
}
.button2 {
float: right;
width: 80px;
height: 60px;
}
.text_area {
clear: both;
display: block;
width: 100%;
height: 150px;
margin: 5px;
/*I have no idea how to position this*/
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
I made a jsfiddle, check this one, should get you started :)
https://jsfiddle.net/fazbyxyq/
html5
<div class="right">
<div>upper left</div>
<div>header</div>
<div>upper right</div>
<div><textarea>textarea</textarea></div>
<div>button2</div>
</div>
css3
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.left{
float:left;
width:10%;
height:100px;
border:1px solid #000;
}
.right{
float:left;
width:89%;
margin-left:1%;
}
.right div{
float:left;
width:33%;
border:1px solid #000;
}
.right div:nth-child(2){
text-align:center;
}
.right div:nth-child(3){
text-align:right;
}
.right div:nth-child(4),.right div:nth-child(5){
width:99%;
border:0;
}
.right div:nth-child(4) textarea{
width:100%;
height:100px;
margin:10px 0;
}
.right div:nth-child(5){
text-align:right;
}
Peace out!
well, Your code was wrong in many lvl's. I have fixed it to look like in your image... but it's just a fix. Maybe not what you are looking for.
As a resume: You want a container with an image looks like a column and the rest of the html stay as another column.
Then, as you did, the image container is floating left with a fixed width of 50px but we have to add 10px more as you have given the container 5px margin (5px right and left = 10px),
Then I just add a container which will take the rest of the html. THen it's easy to give the container a float left and as its width 340px so the total of your layout is, as you want, 400px.
I have added both box-sizing: border-box; to make the border be inside the containers and not messing with the fixed widths.
Then I just have added .header {float:left;} as basically ion your code you have a class named the_headerwhich is not even used in the html. and then a bit of margin to the h2 to separete it from upper left
here you have the fiddle
The key lays in treating your layout as a layout with 2 columns. I believe the markup should look something like this:
<div id='demo'>
<div class='col1'>
<img src='http://www.placehold.it/50x100' />
</div>
<div class='col2'>
<div class='header'>
<span class='left'>left</span>
<span class='right'>
<button>button</button>
right
</span>
<h2>center</h2>
</div>
<textarea>Lorem ipsum</textarea>
<button>button</button>
</div>
</div>
to achieve the result in your image, you should add the following css:
#demo {
border: 2px solid black;
padding: 10px;
}
#demo .col1, #demo .col2 {
display: inline-block;
vertical-align: top;
}
#demo .col2 {
width: calc(100% - 60px);
}
#demo .left {
float: left;
}
#demo .right {
float: right;
}
#demo .header {
text-align: center;
}
#demo textarea {
width: 100%;
min-height: 100px;
margin: 8px 0;
}
#demo button {
float: right;
margin-left: 8px;
}
Note that I've used as little fixed dimesions as possible. Just cause it will make your layout adapt easier to different content and different screen sizes.
I've put your code next to my proposal in a fiddle. I think the code should be fairly easy and self explanatory, but feel free to ask if anything isn't clear.
Here is another fiddle that uses the "calc" operation to set the textarea the remaining width of the div.
Here is the fiddle http://jsfiddle.net/SteveRobertson/tyokk1qj/
I wrap this image in and set the height to 100% and then modify the rest of the elements to the right use CSS
.outer_border {
border: 1px solid black;
width: 600px;
height: 500px;
}
.inner_border {
border: 3px solid black;
width: 400px;
height: 300px;
}
#tall{
height:100%;
float:left;
}
.image {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 100px;
margin: 5px;
float: left;
}
.the_header {
text-align: center;
display: inline-block;
}
h2 {
display:inline;
}
.button1 {
float: right;
}
.button2 {
width: 80px;
height: 60px;
display: block;
float:right;
}
.text_area {
clear: both;
display: inline;
width:auto;
height: 150px;
margin-right: 0;
}
.upper_left_text {
float: left;
}
.upper_right_text {
float: right;
}
.text_area{
width:calc(100% - 70px);
}
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
here is the css:
#container {
margin: 0 auto;
width: 1200px;
}
#col1 {
float: left;
width: 700px;
}
#col2 {
float: left;
width: 100px;
padding: 0 17px;
}
#col3 {
float: left;
width: 400px;
}
I want column 2 to remain at the top of the page once i begin to scroll down. Position fixed doesn't really work as it then screws up the floats.
Thanks for the help.
Figured it out:
#col1 {
float: left;
width: 500px;
margin-right: 100px;
}
#col2 {
position:fixed;
margin-left:500px;
width: 100px;
padding: 0 17px;
}
#col3 {
float: left;
width: 300px;
}
#container {
margin: 0 auto;
width: 900px;
}
Just needed to use margins with fixed positioning.
HTML
<div class="whole">
<div class="fst"></div>
<div class="sec"></div>
<div class="thd"></div>
</div>
CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
}
.thd {
float: right;
width: 20px;
background: blue;
}
Is there a way to stretch the div.sec to fit with the area left by div.fst and div.thd in any screen size? The width of div.fst and div.thd is fix in pixel.
Is there any solution with only css?
Really appreciate your helps!
Please see my fiddle http://jsfiddle.net/vHHcf/
This seems to be what you want.
jsFiddle example
Given that you said .fst and .thd have fixed widths, you can use calc() to subtract the 40px value from 100%.
.sec { width:calc(100% - 40px); }
Updated CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
width:calc(100% - 40px);
}
.thd {
float: right;
width: 20px;
background: blue;
}
I'm trying to make 2 divs appear on separate lines within an outside div. Right now I have display:inline-block set for both of them, but I'm not sure how to change this to make them appear on separate lines.
Here is what my code looks right now, I would like John Doe and 100 to appear on separate lines within the leader div:
http://jsfiddle.net/ZnuPR/
HTML
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="name">John Doe</div>
<div class="score">100</div>
</li>
</ul>
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: inline-block;
}
.score {
display: inline-block;
}
You could simply float .ranking and then leave .name and .score as display: block.
http://jsfiddle.net/ZnuPR/7/
.ranking {
/* ... */
float: left;
}
The fastest solution is to set the ranking to "float:left;" and the name and score to "display:block;". Block level elements span 100% by default which will make sure the 2 elements are on seperate lines.
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
float:left;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: block;
}
.score {
display: block;
}
http://jsfiddle.net/ZnuPR/2/
I think this is what you mean:
http://jsfiddle.net/ZnuPR/6/
Don't use inline-block and remove the height from the container, it will automatically adjust to the height it needs to be.
http://jsfiddle.net/ZnuPR/8/
Added a .details wrapper and some floats.
.ranking {
float:left; /* Floating */
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.details {
float:left; /* floating */
}
.name {
display: block; /* Changed to block */
}
.score {
display: inline-block;
}
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="details">
<div class="name">John Doe</div>
<div class="score">100</div>
</div><!-- end details wrapper-->
</li>
</ul>
I think this could be useful:
http://jsfiddle.net/ZnuPR/10/
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
width: 100%;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
width: 100%;
}
.score {
width: 100%;
}
This is what I did:
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
I got rid of display: inline-block and height