I am using bootstrap.css and <div class="box">/''HTML content'''/</div>
class=box is div box with white background
I have vertical menu inside <div class="box">/''vertical menu''/</div>
When run the page I don't get the div box covering the full vertical menu.
div box CSS
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;}
and i have added <div id="leftmenu"> inside box
leftmenu css
#leftmenu {
margin-left: 100px;
float: left;
width: 25%;
}
and am listing two div in same row 2 div in same row works but div box does't cover the 2 div
error
div box does't cover the vertical menu
jsfiddle
Add overflow: hidden; to the .box class like this:
JSFiddle - DEMO
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;
overflow: hidden;
}
OR: place your <div style="clear:both"></div> inside the <div class="box"></div> - DEMO
You can add float:left; width:100%; to your code.
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;
float:left;
width:100%;
}
JsFiddle is here.
Related
I have this code
HTML
<div class="head">
<div class="menu">
</div>
<div class="search">
</div>
</div>
CSS
.head {
height:110px;
position:relative;
}
.menu {
float:left;
position:absolute;
bottom:0px;
}
.search {
float:right;
position:absolute;
bottom:0px;
}
What I'm trying to do is put the div "menu" at the bottom left of the div "head" and the div "search" at the bottom right of the div "head".
When I use the position and bottom values for "menu" and "head" it aligns the menu perfectly, but when I try the same thing with "search" it throws it on top of "menu" offset a little.
Here is a picture example
https://i.stack.imgur.com/KBUxw.png
(the "menu" div aligns correctly but "search" aligns to the left and on top of the "menu" a little higher)
Getting rid of position and bottom values and using just float will align each to their respective sides inline with each other, but it won't put them on the bottom of the parent div.
I've got as far as getting them to align to the sides, but the "search" div is still higher than "menu" (and not on the bottom).
This might be because it has a form in it with a input search field.
Edit1
: I've found out that the problem is that I need to actually align the search box to the bottom of "search". I tried adding this to .searchbox
.searchbox {
vertical-align:bottom;
}
But this does not work, and neither does bottom:0px;.
Edit2
: I found the solution since I found out what the problem actually was. I had to add this code to a class assigned to the input box
position: absolute;
right: 0;
bottom: 0;
And now it's working perfect. I don't have any other content inside "search" except the box so aligning the div "search" isn't too big of a deal since now the input box is aligning to "head". Thanks everyone!
I tried doing this and it seemed to work for me in Chrome and Firefox. Also, your second to last closing div needs to be fixed.
Codepen: https://codepen.io/jhhboyle/pen/BZQVvO
Link to another thread that was helpful with the bottom / right / left styling:
Put text at bottom of div
HTML:
<div class="head">
<div class="menu">
Content
</div>
<div class="search">
COntent
</div>
</div>
CSS:
.head {
height:110px;
position:relative;
background-color:green;
}
.menu {
font-size:18px;
position:absolute;
bottom:0px;
background-color:red;
}
.search {
position:absolute;
bottom:0px;
right:0px;
background-color:blue;
}
A div with two div's align left and right bottom
Try this in CSS file:
.head {
height:110px;
position:relative;
}
.menu {
float:left;
position:absolute;
bottom:0px;
}
.search {
right:0px;
float:right;
position:absolute;
bottom:0px;
}
You can use display: flex; to align the divs to the bottom left and right.
.head {
height: 110px;
position: relative;
display: flex;
align-items: flex-end;
border: 1px solid black;
box-sizing: border-box;
}
.menu {
font-size: 18px;
}
.menu, .search {
flex: 0 0 50%;
max-width: 50%;
border: 1px solid red;
box-sizing: border-box;
}
<div class="head">
<div class="menu">
Menu
</div>
<div class="search">
Search
</div>
</div>
Create an another div with position:absolute; and put both child div inside it.
css
.box {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
border-top:1px solid;
}
.menu {
font-size: 18px;
float: left;
margin-left: 10px;
}
.search {
float: right;
margin-right: 10px;
}
HTML
<div class="box">
<div class="menu">
hello
</div>
<div class="search">
bye
</div>
</div>
.head {
height: 110px;
border-radius: 2px 2px 0px 0px;
position: relative;
border: 1px solid;
}
.box {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
border-top:1px solid;
}
.menu {
font-size: 18px;
float: left;
margin-left: 10px;
}
.search {
float: right;
margin-right: 10px;
}
<div class="head">
<div class="box">
<div class="menu">
hello
</div>
<div class="search">
bye
</div>
</div>
</div>
This is a another way to get the same
2nd way to do this
3rd way to do this
Add this:
.menu{left:0;}
.search{right:0;}
I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:
https://jsfiddle.net/dtps4fw8/2/
any suggestions?
HTML:
<div class="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
See this fiddle
To make the 3 divs centered, first of all, remove the floatproperty and then to apply the floated effect, use display:inline-block. inline-block display gives a textual characteristics to the div. A text-align:center for the parent div would center these inline-block elements inside the parent.
Update your CSS as follows
.box {
width: 30%;
height: 200px;
display: inline-block;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
.content {
text-align: center;
}
First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;
I use flexbox. Very minimal and responsive.
.content {
width:100%;
display: flex;
flex-direction:row;
flex-wrap:wrap;}
.box {
height: 200px;
flex:1;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;}
<div id="div1">
<div id="div2">
// content set the height of div 2
</div>
</div>
I'm currently stuck on having my child div scrollable, when re sizing browser.
div1 will resize in accordance to browser window height.
div2 will have a scrollbar (css property overflow y) when the browser re size below
the height of div2. div2 doesn't have a fixed height, its height is based on the content it holds.
So if browser window height is below div2 content height then show scroll bar.
You can use max-height like this:
html,body {
height:100%;
}
#div1 {
background:red;
color:white;
height:100%;
}
#div2 {
background:black;
max-height:100%;
overflow-y:auto;
}
Check This Demo
Thanks denko.. The demo, is the exact behavior I'm looking for.. Despite making changes to my css on reflection of your demo, I cannot manage to get it working.
Here's my current css.
<div id="container">
<div id="div1">
<div id="div2">
// content set the height of div 2
</div>
</div>
//css styles
#container{
position:absolute;
}
#div1 {
margin-right: 20px;
display: inline-block;
border-style: solid;
max-width: 700px;
min-width: 300px;
border-color: #999999;
border-width: 1px;
/* box-shadow: 0px 0px 1px rgb(109,109,110); */
/* float: left; */
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: relative;
height: 100%;
}
#div2 {
color: #6e6e6e;
font-family: arial;
font-size: 14px;
overflow-y: auto;
/* height: 225px; */
overflow-x: hidden;
position: relative;
min-height: 100%;
}
I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it.
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
}
JSFiddle: http://jsfiddle.net/AAUbA/
How do I fix it so I can see the rounded corners at the top of the outer?
Use overflow: hidden on your #box element:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
overflow: hidden
}
See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/
As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.
This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.
Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
JSFiddle demo
add overflow: hidden on your #box element.
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>