Good day! I did some reasearch and I read here difference between css height : 100% vs height : auto
that height-auto should take the minimum amount of space depending on the children's width.
In my case, the property behaves like width 100%, taking 100% of it's parent's width
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
.header2 {
float:left;
width:900px;
height:23px;
background:red;
}
.buttonHolder {
margin: 0 auto;
width:auto;
height:24px;
background:black;
}
.button {
width:50px;
height:24px;
background:blue;
float:left;
}
</style>
</head>
<body>
<div class="header2">
<div class="buttonHolder">
<div class="button"></div> <div class="button"></div> <div class="button"></div>
</div>
</div>
</body>
The question is: Where is my error?
.header2 {
float:left;
width:900px;
height:23px;
background:red;
text-align: center;
}
.buttonHolder {
display: inline-block;
height:24px;
background:black;
}
this should work.
Related
I am trying to create a div whose width changes based on text inside.
The parent div width is auto and child div width is set to 100% which is the percent of parent div's width.
But the parent div occupies the whole page width. How can I maintain the minimum width of div to have the whole text in a single line while dynamically changing the text length.
Here is the implementation
.filled-no-icons {
border-width:0px;
position:relative;
padding:0px;
width:auto;
height:auto;
min-width:91px;
min-height:36px;
background-color:rgba(0,0,0,0);
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
border-width:0px;
position:absolute;
padding:0px;
width:calc(100% - 32px);
height:17px;
min-width:59px;
min-height:17px;
background-color:rgba(0,0,0,0);
left:16px;
top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
border-width:1px;
position:absolute;
padding:0px;
width:calc(100% - 0px);
height:17px;
min-width:59px;
min-height:17px;
color:rgba(255,255,255,255);
font-family:Roboto-Medium;
font-size:14px;
font-weight:500;
letter-spacing:0.75px;
line-height:16.40625px;
left:0px;
top:calc(50% - 8.5px);
}
<!DOCTYPE html>
<html>
<head>
<title>
Button test
</title>
<meta charset="UTF-8">
</head>
<body>
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Button</div>
</div>
</div>
</body>
</html>
Edit: Adding jsfiddle link
https://jsfiddle.net/3owturhc/
Not entirely sure why you made such simple design into complicated HTML/CSS. But in general you can set the container to display: inline-block as it has the shrink-to-fit feature. Example below without any markup changes.
Don't set .content to absolute position. As if a container contains nothing but absolute positioned elements, it will collapse to nothing, only if you give it some size, but it will not be aware of the content inside, which means the box size cannot be dynamic.
.filled-no-icons {
position: relative;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 10px;
color: #fff;
}
.filled-no-icons .rectangle-3 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: rgba(0, 150, 136, 255);
}
.filled-no-icons .content {
position: relative; /* increase stacking order */
}
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Button</div>
</div>
</div>
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Lorem ipsum dolor sit amet</div>
</div>
</div>
Add display:inline-block; to the parent element. By default, a div has display:block which occupies the whole width or line. Run code below, thanks.
.filled-no-icons {
border-width:0px;
position:relative;
padding:0px;
width:auto;
height:auto;
min-width:91px;
min-height:36px;
background-color:rgba(0,0,0,0);
display:inline-block;
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
border-width:0px;
position:absolute;
padding:0px;
width:calc(100% - 32px);
height:17px;
min-width:59px;
min-height:17px;
background-color:rgba(0,0,0,0);
left:16px;
top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
border-width:1px;
position:absolute;
padding:0px;
width:calc(100% - 0px);
height:17px;
min-width:59px;
min-height:17px;
color:rgba(255,255,255,255);
font-family:Roboto-Medium;
font-size:14px;
font-weight:500;
letter-spacing:0.75px;
line-height:16.40625px;
left:0px;
top:calc(50% - 8.5px);
}
<!DOCTYPE html>
<html>
<head>
<title>
Button test
</title>
<meta charset="UTF-8">
</head>
<body>
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Button</div>
</div>
</div>
</body>
</html>
I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
bottom:0;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
}
<div class="wrapper">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
you can simply set the display of 'image' and the 'text' element to :inline
or chage the < p > tag to < span >,
because < p > tag takes the whole line and they couldn't take place together!
but < span > tag is an inline element which takes the content width (and not the screen width)
here is a useful explanation about "display" property.
.wrapper {
display: block;
position:absolute;
right:0;
bottom:0;
text-align:center;
margin:0 auto;
}
.footer {
display: inline;
}
.talk{
font-size:40px;
color:black;
}
.logo{
height: 150px;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<span class="footer talk">Big Text</span>
<img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>
</body>
</html>
You can try This Code.
I'am add some media queries and some div to in html page
Html
<div class="wrapper">
One Columns
</div>
<div class="wrapper">
two Columns
</div>
<div class="wrapper">
three Columns
</div>
<div class="wrapper">
<div class="A">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
</div>
CSS
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
width:25%;
float:left;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
width:50%;
float:left;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
width:50%;
float:right;
}
.A{
width:100%;
}
#media (max-width:525px){
.A{
width:100%;
}
.footer-logo {
width:20%;
float:right;
}
.talk {
width:20%;
float:left;
font-size:28px;
}
}
I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Use float:left; Learn about CSS float Property
.sidebar
{
width:150px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:200px;
background:silver;
color:red;
padding:50px;
float:left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
float:left;
padding:50px;
}
.content
{
width:200px;
background:silver;
color:red;
float:left;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.
Like :
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Just added main parent to both div and used display:inline-flex to it.
.main{
display:inline-flex;
}
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
<div class="main">
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
adding float:left to both div will fix the issue.
css code:
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
}
html code:
<div>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
and if one of your div is going down then you must adjust your div's width.
Apply a float:left to the widgets
To solve this problem :
You should add this code to .content and to .sidebar
Add float:left...
This should help
http://www.w3schools.com/cssref/pr_class_float.asp..
glad to help you
Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.
So in your CSS you should add the property as below, to get the desired result:
.sidebar {
float: left;
}
Watch the demo here.
To get more information about float, one can always Google, as it is an ocean of knowledge.
use CSS float Property
float: none|left|right|initial|inherit;
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float: left;
}
.content {
width: 200px;
background: silver;
color: red;
padding: 50px;
float: left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
So i have this construction as template, it work fine with full content on page and fork not fine if text or images dont fill all height, then columns and content div look cutted if i color their fields.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/grad.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<style type="text/css">
</style>
</head>
<body>
<div id="header">
<div align="center"><img src="img/tsu._e.png" border="0" align="middle"></div>
</div>
<div id="gradient"></div>
<div id="content">
<div id="content1">
<div id="content2">
<div id="content3">
<div id="center">
</div>
</div>
<div id="left"></div>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
css:
* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#0000FF; height:100px; width:100%; }
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden; }
#content1 { width:100%; float:left; margin-right:-180px; }
#content2 { background:#000000; margin-right:180px; }
#content3 { width:100%; float:right; margin-left:-200px; }
#left { background:#FFFFFF; width:200px; float:left; }
#center { background:#FFFF; margin-left:200px; }
#right { background:#FFFFFF; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#0000FF; width:100%; height:60px; }
gradien hight 3px
Question: why div with id=content dont fill 100% height? and how repair it in this case?
Instead of
height:100%;
use
height:100vh;
Seems you don't have 100% in #content
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;
try
#content { height:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;
and you have all the inner div empty
take of the position relative of your body and give a height: 100% to your content
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.