Good Day.
I am creating a somewhat percentage bar using a given width in input style. I want the given div to be horizontally align with each other but not overlapping, just following after each other. How can I possibly do that?
Here is a simple code
http://jsfiddle.net/XU3JM
<html>
<head>
<style>
#one{
background: green;
height: 20px;
}
#two{
background: blue;
height:20px;
}
#three{
background: gray;
height:20px;
}
</style>
<body>
<div id="one" style="width:20px;"></div>
<div id="two" style="width:30px;"></div>
<div id="three" style="width:40px;"></div>
</body>
</head>
</html>
The width has no constant value so I can't just put margin-left with it. I've been tweaking with this fall back code. No such luck. Thanks in advance.
Add this css:
#one, #two, #three {display:inline-block;}
http://jsfiddle.net/h35N6/
Or this css:
#one, #two, #three {float:left;}
http://jsfiddle.net/h35N6/1/
This is probably going to help
#one,#two,#three{
height: 20px;
padding: 0;
display: inline-block;
*display: inline;
zoom: 1;
}
It also supports older IE versions
http://jsfiddle.net/XU3JM/2/
Use display:inline-block; for each div to be centre aligned and wrap them in a new container with text-align: center; applied to it.
#first{
background: green;
height: 20px;
margin-left: 2px;
color: white;
float: left;
}
#second{
background: blue;
height:20px;
margin-left: 2px;
color: white;
float: left;
}
#third{
background: gray;
height:20px;
margin-left: 2px;
color: white;
float: left;
}
<div id="first" style="width:20px;">20</div>
<div id="second" style="width:30px;">30</div>
<div id="third" style="width:40px;">40</div>
Related
I'm a noob at CSS and I was playing with CSS and DIVS, everything was going well until I decided put 2 Divs inside of one. I can put ONE div inside of another, but when I put 2 it just bugs.
I could put the green Div inside of yellow div but not the cyan
Here is my HTML:
<html>
<head>
<link type="text/css" rel="stylesheet" href="style_divs.css">
</head>
<body>
<div id="table">
<div id="year">2017</div>
<div id="month">
<div id="previousMonth">Previous</div>
<div id="nextMonth">Next</div>
January
</div>
</div>
</body>
</html>
CSS
#table{
width:25%;
height:50%;
background-color: red;
margin: 0 auto;
}
#year{
width:100%;
height:10%;
background-color: blue;
margin: 0 auto;
text-align: center;
}
#month{
width:100%;
height:10%;
background-color: yellow;
margin: 0 auto;
text-align: center;
}
#previousMonth{
width:12%;
height:100%;
background-color: green;
margin-left: 0%;
text-align: center;
}
#nextMonth{
width:12%;
height:100%;
background-color: cyan;
margin-left: 88%;
text-align: center;
}
Thanks.
The best approach is to use the #previousmonth float:left and #nextMonth float:right
You should not use the margin feature to achieve this below is the corrected two styles using the float command
#previousMonth{
width:12%;
float:left;
height:100%;
background-color: green;
text-align: center;
}
#nextMonth{
width:12%;
height:100%;
float:right;
background-color: cyan;
text-align: center;
}
body{
height:500px;
width:600px;
}
#table{
width:50%;
height:70%;
background-color: red;
margin: 0 auto;
}
#year{
width:100%;
height:10%;
background-color: blue;
margin: 0 auto;
text-align: center;
}
#month{
width:100%;
height:10%;
background-color: yellow;
margin: 0 auto;
}
/*wrapped them in div so they can be one group*/
#pager{
height:100%;/*tells the pager to take 100% of parent's height(month)*/
}
#pager div{/*tells the child divs of pager to have same properties*/
display:inline-block;/*this will display contents side by side one another*/
width:12%;
height:100%;
}
#previousMonth{
background-color: green;/*assign properties that are unique to the child*/
}
#nextMonth{
background-color: cyan;
float:right; /* this will make it float to right */
}
#monthname{
text-align:center;
}
<body>
<div id="table">
<div id="year">2017</div>
<div id="month">
<div id="pager">
<div id="previousMonth">Previous</div>
<div id="nextMonth">Next</div>
</div>
<div id="monthname">January<div/>
</div>
</div>
</div>
</body>
I have tinkered with your codes a bit. You need to tell the element what to do. Also, try not to wrote same codes to children since they will inherit the parent's properties. Pressing F12 will tell you which properties the element has when rendered. Hope this helps. Good luck and happy coding.
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);
}
I need two divs next to each other so I had to put them in a wrapper. I want the outer div's height to be set by using the taller of the two div's wrapped inside. The height does seem to portray that quality when I use height:auto; for the outer div. However, the shorter of the two div's does not fill the entire height and it is not the same height as the other column. Does anybody know any CSS tricks to get this to work?
This CSS is as follows:
html, body {
background-color: #888888;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped {
width:95%;
border-style: solid;
border-width: 5px;
border-color: black;
overflow: hidden;
color:black;
margin:5px;
height: auto;
}
.post {
width: 50%;
float: left;
overflow:hidden;
}
.bully {
background-color: green;
width: 50%;
float:right;
overflow: hidden;
text-align: center;
}
The html is as follows:
![<html>
<head><link rel="stylesheet" type = "text/css" href = "style.css"></link></head>
<body>
<div class="wrapped">
<div class="post"> Q: WHAT'S GOING ON??? <br/> A: I HAVE NO IDEA!!! </div>
<div class="bully">55.55</div>
</div>
</body>
</html>]
Image
I have attached an image of one example of this. Because of the sensitive nature of the other examples, I can provide you with any others. Thanks in advance!
What you need is adding extra div to make it seems same height.
The HTML:
<div class="wrapped2">
<div class="wrapped1">
<div class="post">Q: WHAT'S GOING ON???
<br/>A: I HAVE NO IDEA!!!</div>
<div class="bully">55.55</div>
</div>
</div>
Add some css like this:
html, body {
background-color: #fff;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped2{
float:left;
width:100%;
background:green;
position:relative;
right:40%;
overflow:hidden;
position:relative;
}
.wrapped1 {
float:left;
width:100%;
background:red;
position:relative;
right:30%;
}
.post {
height:auto;
float: left;
overflow:hidden;
background:red;
position:relative;
left:70%;
}
.bully {
position:relative;
left:70%;
}
The point is position:relative.
And taraa...something like this will approaching.
Hope it will work for you.
Sorry if it is a duplicate of something, I have searched honestly, but I still have the problem which is shown in this fiddle: http://jsfiddle.net/tfvdzzee/1/
The code here:
html
<div id="wrap">
<div id="one">1</div>
<div id="two">2</div>
</div>
css
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one, #two
{
width: 50%;
background: green;
}
#two
{
float: right;
background: red;
}
I believe display: inline-block; is the best answer, as it prevents bugs of overlapping and overflowing, while also keeping its parent definitions.
JsFiddle Demo
HTML
<div id="wrap">
<div id="one">1</div><!--
--><div id="two">2</div>
</div>
CSS
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one, #two
{
width: 50%;
background: green;
display: inline-block;
/* If worried about IE7 and IE6, add the two next lines */
*display: inline;
*zoom: 1;
}
#two
{
background: red;
}
Demo Fiddle
You need to both float:left the #one element as well as set overflow:hidden to the parent to ensure it wraps the children correctly.
Change your CSS to:
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
overflow:hidden; /* <---ensure the parent wraps the children */
}
#one, #two
{
width: 50%;
background: green;
float:left; /* <---ensure the children display inline */
}
#two
{
float: right;
background: red;
}
Add the following style in your CSS.
#one{float:left}
DEMO
Remove the Css property for #two and add this
#one, #two
{
width: 50%;
background: green;
float: left;
}
Use float: left and you don't need float: right for #two.
#one, #two
{
width: 50%;
background: green;
float: left;
}
#two
{
background: red;
}
Fiddle example.
You will need to float both your divs. After the float, clear the float using the clearfix class.
CSS:
#one, #two{ float:left; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
HTML:
<div id="wrap" class="clearfix">
<div id="one">1</div>
<div id="two">2</div>
</div>
DEMO
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#wrap:after{
clear:both;
content:"";
display:block;
}
#one, #two
{
width: 50%;
float:left;
background: green;
}
#two
{
background: red;
}
Try this and use clearfix on the :after pseudo element of your #wrap div.
DEMO
To Expand on the comment by sifu and answer the question in a choice of ways
The first method (Using float's)
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
}
#one,#two
{
float:left;
width:50%;
}
http://jsfiddle.net/tfvdzzee/7/
Display Inline-block method
#wrap
{
max-width: 400px;
margin: auto;
border: 2px solid black;
font-size:0px;
}
#one,#two
{
width:50%;
display:inline-block;
font-size:16px;
}
http://jsfiddle.net/tfvdzzee/8/
Both methods can be used however if you are still developing for IE7 (not sure why you would) then method 2 wont work.
i want 3 columns with the same width.
i did succeed by use divs.
i made 2 divs in a div, then made another div in one of the two divs and then used css float left & right.
but was wondering if there was a different and better way? (no tables, i tried doing this without tables)
because i had trouble centering texts that were next to a image
and because i used float the white background disappears in the area where the columns were.
could someone help me either fix the problems i'm having or giving me a alternative method.
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.wrapper {
margin: 0 auto;
width: 450px;
}
.left {
float: left;
width: 150px;
background-color: red;
height:200px;
display:inline-block;
}
.middle {
background-color: yellow;
height:200px;
width: 150px;
display:inline-block;
}
.right {
float: right;
width: 150px;
background-color: blue;
height:200px;
display:inline-block;
}
I don't really get your question. But I make a solution. Here's my demo on Fiddle:
http://jsfiddle.net/asubanovsky/8d3m9/
HTML:
<div id='parent'>
<div id='first'>First</div>
<div id='second'>Second</div>
<div id='third'>Third</div>
</div>
CSS:
#parent{
width: 900px;
margin: 0 auto;
}
#first, #second, #third{
width: 300px;
float: left;
color: white;
text-align: center;
}
#first{
background-color: #222;
}
#second{
background-color: #444;
}
#third{
background-color: #666;
}