I would like to place two divs within a container side by side and - thanks to SO - I feel I'm almost there, but there is something I really don't understand.
The html looks like this:
<div class="parent">
<div class="font" id="left"></div>
<div class="font" id="right"></div>
</div>
CSS looks like this:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
height: 100%;
}
#right {
width: 50%;
background: orange;
display: inline-block;
height: 100%;
}
.parent{
font-size:0;
margin: 0;
height: 40px;
}
.font{
font-size:16px;
}
font-size needs to be 0 to account for the whitespaces. display is set at inline-block (I'd rather use display than float).
This works fine. It keeps working when I add content to both the left and the right block. However, when I add content to only one block, this block gets strangely offset from the top. It's like adding margin-top: 50px or something. And I don't get why.
Here's the JSFiddle with content in the left block: https://jsfiddle.net/dave_s/phon1tws/
I've also tried overflow:hidden, but that shrinks the block with the content.
Any help would be much appreciated! Also if someone could explain to me what happens here, that'd be really great!
Thanks a lot!
One way is do use flexbox. Codepen example. Note the support for flexbox and use prefixes.
.parent {
display: flex;
}
add this in css
#left, #right{float:left;}
Alternatively, you can use CSS tables. Your mark-up lends itself nicely to the technique.
The main advantage is that you don't have to alter the font sizes to compensate for the white space that can show up between inline blocks.
Having said that, both approaches will work in your situation.
body {
margin: 0;
}
.parent {
display: table;
width: 100%;
height: 40px;
}
#left, #right {
display: table-cell;
vertical-align: top;
width: 50%;
height: 100%;
}
#left {
background: lightblue;
}
#right {
background: orange;
}
<div class="parent">
<div class="font" id="left">Left Blue</div>
<div class="font" id="right">Right Orange</div>
</div>
Take a look to this really nice guide about Flexbox. Nowadays it's the clearest way to build a layout.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will work:
.font {
font-size: 16px;
vertical-align: top;
}
By default baselines are vertically aligned. If the <div> is empty, its bottom line will be its baseline. Otherwise the baseline of the first line of text is the baseline to be aligned with.
This problem exists even when there are words in both <div>s but having different font-sizes.
Related
I am trying to place two divs of width 50% each but somehow its not appearing on same row, but if I do 49% it stacks in same row. Can anyone please tell me what I am doing wrong with the code(more interested to know the cause than solution).
CSS -
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
}
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
}
.right-c {
width: 50%;
background: #2E4E6E;
display: inline-block;
}
HTML -
<div class="wrapper">
<div class="left-c">
<p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
</div>
<div class="right-c">
<p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
</div>
</div>
JS Fiddle - https://jsfiddle.net/no0chhty/1/
This is a classic issue with elements of type inline-block. Unfortunately, they take document whitespace into account, including blank characters. There are multiple solutions for this, but the one I tend to use involve setting their parent element to font-size: 0 and then resetting the font size on the inline blocks to your desired value.
Read more about this here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Add float:left; to the class "left-c"
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
float:left;
}
Please check out the FIDDLE
Change display: inline-block
to display: table-cell
for both sections like so:
.left-c {
width: 50%;
background: #3EF00C;
display: table-cell;
}
.right-c {
width: 50%;
/* 49% works well */
background: #2E4E6E;
display: table-cell;
}
Here is the JSFiddle demo
replace this css
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
display:flex
}
.left-c {
width: 50%;
background: #3EF00C;
}
.right-c {
width: 50%;
background: #2E4E6E;
}
hi instead of inline block you can you float or flex like this:
link here https://jsfiddle.net/JentiDabhi/r9s3z07e/
CSS
.left-c {
background: #3ef00c none repeat scroll 0 0;
float: left;
width: 50%;
}
<div class="wrapper">
<div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div>
</div>
putting comment between closing tag of left-c and opening tag of right-c will solve the issue.
Example
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
Very basic CSS question. Given the code shown in http://jsfiddle.net/danwoods/65X7X/ why don't the child divs (the colored blocks) fit into the container element?
CSS from fiddle
.container {
width: 360px;
height: 50px;
border: 1px solid black;
}
.container div {
width: 120px;
height: 100%;
display: inline-block;
}
.one {
background: blue;
}
.two {
background: green;
}
.three {
background: red;
}
Thanks in advance,
Dan
Because inline elements are sensitive to white space. You can remove them so the HTML looks like:
<div class="container">
<div class="one"></div><div class="two"></div><div class="three"></div>
</div>
jsFiddle example
Or float the divs left:
.one,.two,.three {
float:left;
}
jsFiddle example
Or use HTML comments to eat up the white space:
<div class="container">
<div class="one"></div><!--
--><div class="two"></div><!--
--><div class="three"></div>
</div>
jsFiddle example
You have to float them left:
http://jsfiddle.net/65X7X/2/
.container div {
width: 120px;
height: 100%;
display: inline-block;
float: left;
}
Hope this helps.
Its not a bug. You can see here why it happens and how you can overcome the problem.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
While putting literally no spaces between the divs in your code, or using HTML comments both work equally well, there is a better solution. In my opinion, the most elegant solution, by which I mean the way which does not involve having to mess up the look and readability of your code, is to add this line of CSS:
body>.container{font-size:0;}
If your body tag is not the parent of .container, replace body with whatever the parent is. This line basically says that the styles will apply to the .container class, but only that specific class. Not the child elements of .container. So by applying a font size of 0, you eliminate the gaps made by it, thereby bringing everything into alignment.
http://jsfiddle.net/65X7X/6/
I need help with a recurring problem that happens a lot. I want to create a header that consists of 3 sections which are positioned inline. I display them inline using the following css code: display: inline & float: leftThe problem is that when I resize my browser window the last div is pushed down and isn't displayed inline. I know it sounds like I'm being picky, but I don't want the design to distort as the visitor change's the monitor screen. I have provided the html and css code below that I am working with below. Hopefully I have explained this well enough. Thanks in advance.
HTML
<div class="masthead-wrapper">
</div>
<div class="searchbar-wrapper">
</div>
<div class="profile-menu-wrapper">
</div>
CSS
#Header {
display: block;
width: 100%;
height: 80px;
background: #C0C0C0;
}
.masthead-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #3b5998;
}
.searchbar-wrapper {
display: inline;
float: left;
width: 560px;
height: 80px;
background: #FF0000;
}
.profile-menu-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #00FF00;
}
display them inline using the following css code: display: inline & float: left
Aside... You are actually floating the element, not displaying it inline. The display:inline rule is irrelevant here since floated elements are implicitly displayed as block.
But anyway, your problem is that your sections are all of a fixed width (200 + 560 + 200 = 960px), so when the browser window reduces to near this width (960px plus a bit more for your page margins) the design is going to break - your containers wrap.
If you still want these containers to be fixed width and to simply be cropped on a smaller browser window then you could perhaps add overflow:hidden to your #Header. At least then it won't push the #Header height down beyond 80px (which is a problem you seem to be experiencing). But content will be hidden on the smaller screen.
Or, make all your column containers dynamic and give them percentage widths, so that they flex with the available width. eg. 20%, 60% and 20% respectively. Although this might make the widths too small or too large at some window sizes. You could add a min-width and max-width (with an absolute amount) to limit this. But at narrow widths height:80px is not going to be enough, so min-height:80px would perhaps be more appropriate, if your design allows for your #Header to be flexible?
With the percentage, be sure to no have padding on your columns. The padding will be add some width. For your header, you can use the position:fixed, and for IE6 and 7 use position: absolute ( the position :fixed ) doesn't work for them.
For the columns, you can add the clearfix method who can help you for placing without problem the rest of the content.
Your HTML can be something like this :
<div id="header" class="clearfix">
<div id="col01">Column 01</div>
<div id="col02">Column 02</div>
<div id="col03">Colunm 03</div>
</div>
And the CSS :
#header {
position: fixed;
height:80px;
width:100%;
}
#col01,
#col02,
#col03 {
float:left;
}
#col01,
#col03 {
width:20%;
}
#col02 {
width:60%;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Hope it's helping you :-)
I'm currently using 1 table to align 2 main portions of the site. It's causing problems for me now, so I'd like to use pure CSS.
I have a 205px wide navbar column on the left. Occupying the rest of the space on the right, I'd like to have a container (So on the right side of the screen, taking up screen width - 200 pixels) This container would not have a fixed height, but I want its top to be aligned with the top of the navbar.
Here's a demo of what I currently have .
I would like the solution to be similar to that, but not use tables, and have the top of the container aligned with the top of the sidebar.
I've made several attempts at doing this (before I started using the table, and after) but none of them even remotely worked. I've come here as a last resort, so I hope that someone could help.
Fiddle
.container{height: 100%; border: 1px solid #0f0; display: table;}
#sidebar{
width:40%; height: 100%; display: table-cell; background: #ccc;
}
#sidebar2{
width:60%; height: 100%; display: table-cell; background: #f00;
}
body, html {
height:100%;
}
HTML
<div class="container">
<div id="sidebar">links and whatnot go here</div>
<div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>
</div>
Note: table-cell property is supported by supports IE8+
EDIT:
If you can't use table-cell then you have to use some jquery to calculate height. Check this Fiddle
I would do something like this:
. HTML:
<div id="container">
<aside id="sidebar">Links and whatnot</aside>
<section id="content">Content and whatnot</section>
</div>
. CSS:
html, body {
width: 100%;
height: 100%;
}
div#container {
height: 100%;
}
aside#sidebar {
background-color: #f00;
width: 205px;
min-height: 100%;
float: left;
}
section#content {
background-color: #0f0;
min-height: 100%;
}
You can see it working in this fiddle.