My problem is with child div.
I have code:
<div id="menu" class="menu">
<div class="logo"></div>
<div class="menulist">
<span>First</span>
<span>Second</span>
<span>Third</span>
<span>Fourth</span>
</div>
</div>
css:
#menu{
width:100%;
z-index:998;
height:64px;
max-height:auto;
overflow-y:content;
position:fixed;
background-color: rgba(0, 0, 0, 0.63);
box-shadow:0px 0px 5px black;
}
.logo{
height:100%;
width:70px;
background-color:red;
display:inline-block;
}
.menulist{
display:flex;
height:100%;
width:70vw;
background-color:red;
display:inline-block;
}
.menulist span a{
font-family: Segoe UI Light;
padding:0px;
margin:-50px;
position:relative;
height:32px;
font-size:30px;
display:inline;
margin-left:auto;
margin-right:auto;
}
Without any content on .menulist div this div is fit to #menu, but after add some span's he isn't in #menu (lower). Can you explain me why?
Here's Jsfiddle project:
https://jsfiddle.net/wd3tjgk8/3/
I've edited your Fiddle not only to achieve the desired effect, but to clean up your code a bit. Instead of using inline or inline-block, I float everything in #menu to the left with
#menu *{
float: left;
}
By floating, you stop every element from having white-space and line-space. Besides that, I've removed the spans and some unnecessary mark-up.
Here's the Fiddle.
Hope this helps
Use vertical-align: top; on .menulist to fix this: https://jsfiddle.net/wd3tjgk8/5/
.menulist {
height: 100%;
width: 70vw;
background-color: red;
display: inline-block;
vertical-align: top;
}
Why? display: inline-block; will position it in the middle if not set to top ;)
Related
Below my nav bar, I would like an aside on the left and a section right next to the aside. My aside and section should be on the same line not overlapping. My section right now is below my aside on a new line. How can I fix this issue?
header {
color:black;
text-align:center;
padding:5px;
display:block;
}
#wrapper {
width: 700px;
margin: 0 auto;
}
#nav {
width:500px;
margin: 0 auto;
list-style-type: none;
white-space: nowrap;
display:block;
}
#nav {
padding: 10px 0;
width:500px;
margin: 0 auto;
text-align: center;
list-style-type: none;
display:block;
-webkit-box-shadow: 0 2px 10px -12px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
#nav li {
display: inline-block;
}
#nav a {
text-align:center;
text-decoration:none;
padding: 5px;
}
aside {
padding:5px;
height:200px;
width:100px;
display:block;
}
section {
float:left;
width:200px;
padding:5px;
display:inline-block;
}
<header>Portfolio</header>
<ul id="nav">
<li>About</li>
<li>Writing</li>
<li>Multimedia</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<aside>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdfsdf
sdf
</aside>
<section>
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
</section>
You need word-wrap. Then you could:
Use display: block and float:left. https://jsfiddle.net/abalter/5cyp6tjh/
Use display: inline-block and vertical-align: top. https://jsfiddle.net/abalter/cdsjsvL3/
EDIT
If you want to center them, the best way would be to use a wrapper rather than fudging with widths. That will get you into trouble if you try to go responsive (mobile).
https://jsfiddle.net/abalter/2a86ac1t/
HTML and CSS:
aside, section {
display: inline-block;
vertical-align: top;
border: 1px dotted blue;
word-wrap: break-word;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<aside>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdfsdf
sdf
</aside>
<section>
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
</section>
</div>
Add float:right; in css for <aside> tag.
OR
You can move <aside> below to section and add float:left; in css.
aside {
padding:5px;
height:200px;
width:100px;
float:right;
}
And
Use word-break: break-all; for aside and section to prevent
overlapping.
Problem is here that you have applied display:block to aside. To fix it use float:left or display:inline-block instead of display:block. like this
aside {
padding:5px;
height:200px;
word-break: break-word;
float:left;
}
To remove overlap. use word-break: break-word;
You have to remove the display:block from aside and change the width to 300px since the float element is are 200px so then it must have 300px so then it format correctly and it overcome the overlap problem
or
you can change the width to auto : width:auto
aside {
padding:5px;
margin-right:30px;
height:200px;
width:300px;
float:left;
}
This is blowing my mind. I have a wrapper div and 2 divs inside it, one of the divs its height is 100% but does not stretch to fit the wrapper.
Here is a JSFIDDLE
The HTML:
<div class="wrapper">
<div class="inner_left">
Just<br />Some<br />Words
</div>
<div class="inner_right">
Anything
</div>
</div>
The CSS:
.wrapper {
width:auto !important;
height:auto !important;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
.inner_left {
background-color:#f0f0f0;
width:270px;
height:auto !important;
border:1px solid #666;
float:left;
margin:auto;
padding:10px;
text-align:center;
}
.inner_right {
background-color:#f0f0f0;
width:200px;
height:100%;
border:1px solid #666;
float:right;
margin:auto;
padding:10px;
text-align:center;
}
I need the div (inner_right) to auto fit the height of the wrapper. So whenever the wrapper's height shrinks or stretches, this div stretches to the maximum height of the wrapper.
Anyone knows why my code isn't working? Appreciate any help.
Here is a solution using display:table and display:table-cell
.wrapper {
display: table;
width: 100%; /* whatever you want */
padding: 0;
background-color: #ccc;
}
.wrapper > div {
display: table-cell;
border: 1px solid #666;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
.inner_left {
width: 270px;
}
.inner_right {
width: 200px;
}
<div class="wrapper">
<div class="inner_left">Just
<br />Some
<br />Words</div>
<div class="inner_right">Anything</div>
</div>
#showdev is right, the parent element needs to have its height explicitly set in order for the height of the child element to work the way you want it to.
Try to set 100% height to whole document:
html,body {
height: 100%;
}
and for wrapper class:
.wrapper {
width:auto !important;
height: 100%;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
fiddle
I need to show two <div>s next to each other and with different backgrounds.
Unfortunately, the background-color of the second <div> is ignored. I have read some posts and people suggest to add clear:both;. Unfortunately, it doesn't help. Is there any way how to get a background-color for .div2?
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
Ok think i understood your problem. You want the element's next to each other.
Here is a CSS for this:
.div1 {
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
/* div1 will follow this */
margin-top:10px;
/* width of div1 + it's paddings */
margin-left:397px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
And here is a demo: http://jsfiddle.net/rvuyH/2/
just add float:left for div2 css like below to display both divs next to each other with background color
.div2{margin-top:10px;width:374px;float:left;background:green;padding:0 10px 10px 0;}
I have just changed the code given by #user3401335
JS FIDDLE DEMO. Please check it out
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:50%;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:45%;
background:red;
padding:0 10px 10px 0;
float:left;
}
What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!
HTML:
<div class="filters">
<span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
<span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
<span style="background-image:url(images/filters/contrast.jpg)">Contrast</span>
<span style="background-image:url(images/filters/brightness.jpg)">Brightness</span>
<span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
you have to change your code in the following way,
.filters {
position:relative;
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.
.filters span {
position:absolute;
left: 0px;
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
I have added position:relative; on filter box,
and position: absolute; and left: 0px;
Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.
SEE JSFIDDLE EXAMPLE
.container {
width:300px;
height:8em;
overflow-x:scroll;
overflow-y:hidden;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:1000px;
border-radius:0px 0px 15px 15px;
}
<div class="container">
<div class="filters">
...
</div>
</div>
Edit: Solution
Here is you fiddle working: Working jsFiddle here
Original Answer
Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.
HTML:
<div class="filters">
<span>Grayscale</span><!--
--><span>Smooth</span><!--
--><span>Contrast</span><!--
--><span>Brightness</span><!--
--><span>Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
white-space: nowrap; /* added */
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
/*float:left; removed*/
}
I have a div (#wrapper) containing 2 divs standing side by side.
I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!
Hope someone can help.
http://cssdesk.com/LWFhW
HTML:
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS:
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
You'll have no luck with floated elements. They don't obey vertical-align.
You need display:inline-block instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block; as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block does.
I recommend this:
Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
You can do this quite easily with display table and display table-cell.
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg
ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of its container.
http://jsfiddle.net/jmdrury/J53SJ/
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:
position: relative;
top: 50%;
transform: translateY(-50%);
A possible solution is to make wrapper div flex with items aligned on center as specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.
The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.
http://cssdesk.com/kyPhC