Just started learning CSS/HTML. I am creating a site for educational purposes.
I am also terrible at explaining things so I hope you understand.
SITE: http://66.172.10.179/resolver/
I am trying to make the max-width of box1 to be 300px.
I want to make a box like this:
but for some reason if I remove display: inline-block; it looks like this:
If I keep the inline-block; and change max width to just width it works but then the issue is
the box wont resize depending on the screen site.
CSS:
.stats {
padding: 15px;
}
.box1 {
background-color: blue;
width: 300px;
display: inline-block;
padding: 10px;
}
.icon {
font-size: 50px;
color: white;
display: inline;
}
.text {
float: right;
display: inline;
}
HTML:
<section class="stats">
<div class="box1">
<div class="icon">
<i class="fa fa-hdd-o"></i>
</div>
<div class="text">
<p>123</p>
<p>Servers</p>
</div>
</div>
The max-width property doesn't imply any specific width. Instead, it limits the possible values of the width property.
Setting display to inline-block implies no specific width, but block (which is the default for <div> elements) implies 100% width.
To answer your question, max-width and inline-block do work together.
If your goal is to prevent the element from growing beyond the browser width, you want max-width: 100%.
Related
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
I'd like to line up two elements in a header:
<div class="col-md-3">
<div class="header">
<div class="icon"></div>
<div class="title"><h1>This is the title row</h1></div>
</div>
<p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>
To the left is a fixed width icon, and I want to the title to fill up the remaining width. (The title is broken in two lines because of the narrow columns):
.col-md-3 {
width: 200px; /*this width is just for illustrating the problem, in reality this is Bootstrap's 25% width column*/
}
.icon {
display: inline-block;
height:50px;
width: 50px;
background: red;
}
.title {
display: inline-block;
}
I can't get them to line up using inline-block. Any ideas why?
PLUNKER
UPDATE
I added a new plunker (see above) to better demonstrate the problem.
I'm looking for an explanation why inline-block doesn't work in this case, and a possible solution how to make it work. Any workarounds posted are really appreciated, but I'd really like to find out what's the deal with inline-blocks in this case.
If the content of the inline-block does not fit on a single row, it will try to fit as a whole on the next line. This is different from regular inline elements, that most of the time is allowed to wrap to the next line.
You might want to read up on this behaviour at the W3C specification about the 'normal flow'.
Not sure why everyone makes it so complex, why not use a float?
.icon {
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.title {
padding: 0 10px;
overflow: hidden;
}
.title h1 {
line-height: 50px;
margin: 0;
}
<div class="col-md-3">
<div class="header">
<div class="icon"></div>
<div class="title"><h1>This is the title row erg erg erg erg erg erg er</h1></div>
</div>
<p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>
You could set .header as table, and set .icon and .title as table cell.
Updated JsFiddle
.header {
display: table;
width: 100%;
}
.header .icon, .header .title {
display: table-cell;
vertical-align: middle;
}
.header .icon {
width: 60px;
}
.header .icon span {
width: 50px;
height: 50px;
display: block;
background: red;
}
.header .title h1 {
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="col-md-3">
<div class="header">
<div class="icon"><span></span></div>
<div class="title"><h1>This is the title row</h1></div>
</div>
<p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>
If you do not specify the width of the inline-block element then the default value is auto. Then the browser will try to calculate a shrink-to-fit width based on the containing blocks width, in your case the .header element which bases its width on your .col-md-3 width. The browser does not take into account your .icon elements width when calculating the width of your .title element. So to get what you want, still using display: inline-block, you have to specify a width for your .title element.
.title {
width: calc(100% - 50px);
}
You could also just use float on your .icon element. See this answer.
Another way is to use display: table for containing block and table-cell for child elements as mentioned in this answer.
From the W3C specification:
10.3.9 'Inline-block', non-replaced elements in normal flow
If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
...
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
I would try something like this instead :
HTML
<div class="col-md-3">
<h2>This is the title row</h2>
<p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>
CSS
.col-md-3 { width: 200px; }
h2 { position: relative; padding-left: 50px;}
h2::before { content:''; position: absolute; height:50px; width: 50px; left: 0; background: red;}
Here's the fiddle
Just add display property value of just inline to .col-md-3 and adjust as needed, then inline-block to both .icon and .title
.col-md-3 {
width: 200px;
display: inline;
vertical-align: middle;
}
.icon {
display: inline-block;
height:50px;
width: 50px;
background: red;
}
.title {
display: inline-block;
height: 50px;
position: absolute;
line-height: 5px;
left: 70px; /* Width of the icon plus 10px for space */
}
<div class="col-md-3">
<div class="header">
<div class="icon"></div>
<div class="title"><h1>This is the title row</h1></div>
</div>
<p>This is some content text. This is some content text. This is some content text. This is some content text. This is some content text. </p>
</div>
Note: You may need to further adjust it to suit your need.
Add a width to .title class
.title {
with: calc(100% - 55px);
}
where 55px is from the .icon width plus 5px.
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!
My problem is quite simple, but I couldn't figure out how to do it.
I have a div and inside it, I display some information . basically, something like this:
title1: 20
title2: 30
I want the title to be aligned to the left, and the number to the right.
Here is how I did http://jsfiddle.net/MmLQL/34/ . As you can see, I have a line break between the number and the title (which I believe comes from the use of h tag). But the thing is even if I use a span tag which is supposed to display elements inline and does not force line break, I lose the text-align right/left option. Here is an exmaple : http://jsfiddle.net/MmLQL/35/
You should try this way with "float:":
.container {
width: 100%;
clear: both;
}
.title {
float:left ;
display: inline;
}
.number {
float: right;
}
<div >
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
</div>
I'd do this woth float param. Like this: http://jsfiddle.net/dan1410/MmLQL/38/
Try this, http://jsfiddle.net/MmLQL/36/,
HTML
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
CSS
h2 {text-align:left}
h3 {
text-align: right;
float:right;
}
You might have to use float-clear on the divs though, this should help, http://www.positioniseverything.net/easyclearing.html,
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..and modify the divs as class="clearfix".
I think the following should work, using inline-block to adjust the layout of the headers, then a float on the left-aligned one to ensure it's nestled against the right one.
div { width: 100%; }
h2 {
width: 50%;
display: inline-block;
float: left;
}
h3 {
display: inline-block;
width: 50%;
text-align: right;
}
You can also use CSS table/table-cells
<div class="container">
<h2>title: The Title</h2>
<h3>number</h3>
</div>
CSS:
.container {
border: 1px solid gray;
display: table;
width: 400px; /* set to 100% if full width */
}
h2 {
text-align:left;
display: table-cell;
}
h3 {
text-align: right;
display: table-cell;
}
See demo http://jsfiddle.net/audetwebdesign/pcZaq/
This approach is useful if you need some control over vertical alignment.
In addition, the table-cells will always remain on a single line, unlike floats or inline-blocks that could wrap to a second line for small screen sizes.
The choice depends in part on how you want the layout to behave in a responsive manner.
Instead of all the hacky solutions provided in other answers, it looks like you want to align tabular data. In which case, you should use a table for that.
Display:table-cell actually only exists in CSS to give the actual element and it's children their styles. It should not be used to let non-table elements behave like table elements. At least, imho.
Float:left seems like an ok alternative, if you're only looking for aligning the lay-out of the elements.
If your data actually is tabular data, then use a table. It solves your problem and is more semantic at the same time.
I know its extremely simple, but I have been coding all day and it doesn't seem to work.
I want the text to be vertically centered inside the box.. What am i doing doing?
http://jsfiddle.net/UAyNh/
UPDATE:
That worked for the text, but the buttons wont center. Check it out on Safari vs. Chrome.
http://jsfiddle.net/Bz9pB/
I give a container line-height equal to its height.
eg.
div.box
{
line-height: 40px;
height: 40px;
}
The only other way I know is to either use a table or replicate a table with CSS:
<div class="table">
<div class="row">
<div class="cell">
text
</div>
</div>
</div>
And
div.table{ display: table; }
div.row{ display: table-row; }
div.cell
{
display: table-cell;
vertical-align: middle;
}
Use line-height and make that equal to the height of the element (so long as your element only has one line, anyway):
height: 25px;
line-height: 25px;
JS Fiddle demo.
If the text will be on one line and the height of that line is similar to that in your example, you can solve it by setting the line-height:
height: 25px;
line-height: 25px;