Here is the markup:
<div class="test">
// These links are added with JavaScript
Text 1
Text 2
</div>
<h1>
Here is my CSS:
a {
display: inline-block;
float: left;
// Other properties
}
.test {
display: block;
}
My problem is that the div and heading appear side by side. However, I want the heading to appear below the div.
I assumed that using display:block will solve the issue but it doesn't.
I tried adding a <br> tag after the div but that does not work either.
One thing that works is setting a height on .test. The problem with this is that some other users might set a higher font-size, hence,(rendering the height I set on container useless) for links somewhere else and this will mess up the layout.
EDIT:
I have just control over the div and the elements inside it. There can be anything above or below the div. The heading is just for reference.
JSFiddle
Basically, you have two options:
Make .test establish a new block formatting context, e.g. with overflow: hidden.
This will make it grow vertically to include the floats, and then the floats won't affect the header because it will be below them.
.test {
overflow: hidden;
}
.test {
overflow: hidden;
}
a {
text-decoration: none;
font-size: 1.3em;
padding: 10px 10px 5px 10px;
margin: 10px 3px;
display:inline-block;
float: left;
width: 60px;
text-align: center;
}
<div class="test">
Text 1
Text 2
</div>
<h1>UI am header</h1>
Clear the header. This will force it to be placed below the floats.
h1 {
clear: left;
}
h1 {
clear: left;
}
a {
text-decoration: none;
font-size: 1.3em;
padding: 10px 10px 5px 10px;
margin: 10px 3px;
display:inline-block;
float: left;
width: 60px;
text-align: center;
}
<div class="test">
Text 1
Text 2
</div>
<h1>UI am header</h1>
You can use float:left; clear:left
You need to clear your floats.
.test::after { content: ''; display: table; clear: both; }
https://jsfiddle.net/L5qz7y2p/3/
HTML
<div class="test">
Text 1
Text 2
</div>
<h1>
UI am header
</h1>
CSS
.test {
width:100%;
}
jsfiddle
Edited JSFiddle
Related
How would one vertically and horizontally center an anchor tag within a parent block or inline-block level element (div or button), while making the clickable area of the anchor 100% the width and height of the parent element?
I've achieved the desired goal using flexbox, however, I'd like to know how I can do so w/out using flexbox or grid.
Below is an example of the effect using flexbox.
.medium-button {
border: none;
border-radius: 4px;
color: #3a66db;
padding: 0;
}
.medium-button__link {
display: flex;
justify-content: center;
align-items: center;
width: 160px;
height: 48px;
}
<button class="medium-button">
<a class="medium-button__link">
Clickable link
</a>
</button>
Solved it, thanks to #insertusernamehere, an <a/> inside a <button/> isn't valid HTML.
That helped simplify the markup to be an anchor tag that looks like and interacts as a button, instead of having nested elements.
--> simply set the anchor tag as a block-level element so you can specify width and height, then use line-height.
.medium-button__link {
display: block;
width: 200px;
height: 48px;
text-align: center;
line-height: 48px;
background: #3a66db;
color: #fff;
font-family: 'OpenSans-Regular';
font-size: 1em;
border-radius: 4px;
text-decoration: none;
}
<a class="medium-button__link" href="https://sirthisisawendys.com">
Clickable link
</a>
Without using flex property you can achieve the vertical and horizontal align anchor element. Actually whenever you gave the height of element you have to give same LINE-HEIGHT on that element. The line-height property specifies the height of a line. So You have to use same line height on medium-button__link div.
u can do this with display table on the <a> tag and width:100% and height:100%
then add for span children: display: table-cell and vertical-align: middle
.medium-button {
border: none;
border-radius: 4px;
color: #3a66db;
width: 160px;
height: 48px;
padding: 0;
}
.medium-button__link {
width:100%;
height:100%;
display:table;
text-align:bottom;
}
span{
display: table-cell;
vertical-align: middle;
}
<button class="medium-button">
<a class="medium-button__link">
<span>Clickable link</span>
</a>
</button>
So i tried to find a solution myself, but i couldn't find a topic with a solution that worked for me, because i have special prerequisites.
My Problem is the following:
I have a sticky DIV element on the left, put in another DIV Element with a
fixed height, because the sticky effect didn't work without fixed height.
On the right are many elements which are in a DIV Container as well. This
Container gets its height by the number of elements.
The optimal way would be, that the sticky element stops after the DIV Container with all his content elements is done. Yet because i have to set a fixed height for the Container of the sticky element, it keeps on taking its full height as white space before there can be any other content again.
I hope it wasn't explained to bad.
alert("The height is " + $("#ProductContainer").height());
#StickyContainer {
float: left;
height: 4000px;
width: auto;
}
.sidebar {
top: 0px;
float: left;
height: 400px;
width: 200px;
padding-left: 10px;
padding-top: 20px;
border: 2px solid black;
margin: 20px 10px 0px 5px;
position: -webkit-sticky;
position: sticky;
}
.content {
float: left;
width: 200px;
height: 300px;
padding: 10px;
margin-top: 20px;
margin-left: 5px;
border: 2px solid red;
}
#Test {
margin-top: 20px;
width: 100%;
height: 100px;
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="StickyContainer">
<div class="sidebar">
This is the sticky sidebar
</div>
</div>
<div id="ProductContainer">
<div class="content">
One of many boxes
</div>
<div class="content">
Here are 2, but in reality there are more than 10
</div>
</div>
<div style="clear:both" ;></div>
<div id="Test"> Here is the next content </div>
Note: Run in fullscreen, otherwise the #ProductContainer will be under the sidebar anyway.
I took many approaches, one was to take the height of the #ProductContainer with jQuery, then set the result as the new height for the #StickyContainer.
Sadly it returns the height 0.
Didn't get much further because of the result. I tried much more of the stuff i found on StackOverflow, but nothing seemed to work. Not only with JavaScript, but also with HTML since the problem seems to be in the ProductContainer that is not embracing the content properly.
However, even if its just a simple stupid mistake of mine, i am thankful for any sort of help.
the content element hast a float and makes the ProductContainer feels nothing inside.
you have to use a clearfix class on parent.
.clearfix:after {
content: " ";
display: block;
clear: both;
}
cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
.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%;
}
and give the class to parent
<div id="ProductContainer" class="clearfix">
I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}
There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.
Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');
Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});
Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.
I am trying to use this code to make a scrollable website but my <p> text won't show. Does anyone have any idea why? I have tried adding both the class as the item reference, but this is not really helping. the link is http://remcovanessen.users41.interdns.co.uk/beerbulance/ if that helps
<body data-hijacking="off" data-animation="scaleDown">
<section class="cd-section visible">
<div>
<h2 class="homepageheader">Beerbulance</h2>
<p> text</p>
</div>
</section>
cd-section {
height: 100vh;
}
.cd-section h2 {
line-height: 100vh;
text-align: center;
font-size: 2.4rem;
}
.cd-section h2.homepageheader{
font-size: 800%;
}
.cd-section:first-of-type > div {
background-color: #09c003;
}
.cd-section:first-of-type > div::before {
/* alert -> all scrolling effects are not visible on small devices */
content: 'Effects not visible on mobile!';
position: absolute;
width: 100%;
text-align: center;
top: 20px;
z-index: 2;
font-weight: bold;
font-size: 1.3rem;
text-transform: uppercase;
color: #09c003;
Because you set line-height: 100vh on .cd-section h2 element. It is currently taking the space of your viewport and pushing the p element below it. If you can't remove/change the line-height set your p element margin to :
p {
margin-top: -16px
}
This will show you the text at the bottom left.
It gets pushed out of the way from your h2 headline <h2 class="homepageheader">Beerbulance</h2>.
You need to re-think your HTML structure.
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.