Take a look at this fiddle: https://jsfiddle.net/hkbynkmf/1/
How do I let the green border flow around all the divs, with no div "overflowing" the border? The upper div is OK, but the lower one is not.
Also, I need some distance between the divs;
I know that padding and margin is transparent, so I chose (a green) border to illustrate my point. In the end, the clearance should be transparent.
HTML:
body {
position: relative;
background-color: #ff0000;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 0px;
border: 10px solid #190;
margin: 0px;
}
#header {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 10px;
left: 0px;
bottom: 0px;
right: 0px;
width: 960px;
height: 250px;
background-color: #DDDDDD;
overflow: hidden; /* Keep all sub-elements inside this div */
}
#intro {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 15px;
left: 0;
bottom: 0px;
right: 0px;
width: 960px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
<body> <!--position: relative;-->
<div id="header"> <!--position: relative;-->
</div>
<div id="intro"> <!--position: relative;-->
</div>
</body>
You're using the top attribute to move your intro div 15px down, below the header. This is causing the 15px overlap with the container. When positioning items this way you should consider using margin to apply the change, rather than the positioning attributes of top, right, bottom or left.
You have a lot going on with your CSS which is making the stylesheet much more complicated than it needs to be. I have simplified your CSS as follows to achieve the same effect:
body {
background-color: #ff0000;
border: 10px solid #190;
margin: 0px;
padding: 0px;
}
a img {
border:none;
}
#header {
background-color: #DDDDDD;
height: 250px;
margin:0 auto;
overflow: hidden;
width: 300px;
}
#intro {
background-color: blue;
height: 150px;
margin:15px auto 0;
overflow: hidden;
width: 300px;
}
See updated fiddle
In your code, the #intro is positioned 15px below the #header. Doing so leaves no place for the div in body.
Not sure what you are trying to achieve here with position: relative; but the #intro can be written like
#intro
{
margin:10px auto;/* div will be H-centered */
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden;/* Keep all sub-elements inside this div */
}
Using the margin top property on the #intro div will allow the green border to flow, while also having the space in between the divs. Here is the fiddle:
https://jsfiddle.net/hkbynkmf/17/
#intro
{
position: relative;
margin:15px auto 0px auto /* div will be H-centered */
left: 0;
bottom: 0px;
right: 0px;
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
Related
So, I have a main container that shows like the following:
I want to be able to adapt the parent div to the number of child's it receives. Let's say we remove div2. The result should be something like this:
Instead, the parent div does not stretch to the width of the div child's
Here's my code:
HTML:
<div class="main-container">
<!-- Card container -->
<div class="card-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
</div>
<!-- Footer container -->
<div class="footer">i am a footer</div>
</div>
CSS:
.main-container {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
}
.card-container {
color: #3B3D3D;
height:105px;
float: left;
width: 100%;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
float: left;
width: 100%;
}
.card {
width:100px;
float:left;
}
What am I doing wrong here? I've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.
Any help will be precious.
Thanks in advance.
Try this https://jsfiddle.net/2Lzo9vfc/136/
You can try to remove one .card on click and see what hapens here https://jsfiddle.net/2Lzo9vfc/138/
CSS
.main-container {
position: fixed;
margin: 0 auto;
left: 50%;
bottom: 0;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
display: inline-block;
transform: translateX(-50%);
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
width: 100%;
}
.card {
width:100px;
height:105px;
display: inline-block;
}
HTML
<div class="main-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="footer">i am a footer</div>
</div>
Here you go: http://codepen.io/n3ptun3/pen/PPgWNb
You don't need to use display: inline-block.
I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.
On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.
Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.
Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
}
.card {
width: 100px;
float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.
I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
display: flex;
}
.card {
width: 100px;
// float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
I'm trying to work out how to work with img divs on a grid. The background image of this grid contains a border, when I try to inspect the element element, the img divs start from the absolute top-left hand corner instead of slightly away from on the actual checkerboard patterned image, which has a thick border around it (950 * 500 - 18 columns wide by 9 rows). Does anyone know How I could tackle this problem?
CSS
body
{
background: #000000 url('gfx/bg.png') 0 0 no-repeat;
position: absolute;
width: 1280px; height:720px;
margin: 0; padding: 0;
overflow: hidden;
font-family: tivo-normal;
text-align: center;
color: #FFFFFF;
}
#GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}
#GameGrid > div
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
float: left;
}
#GameGrid > div > img
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
}
If I calculate by the values you are given: 18 columns each 52px wide that makes it 936px and your GameGrid is 950px. So I am assuming the 14px are taken by the border i.e. 7px each side
So, you can just add a padding in GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
padding:7px;
}
Set specific top,right,bottom,left paddings if they are required specifically.
you can add the cellpading="0" attribute to your tag. You can also add a CSS rule to prevent padding, something like:
#GameGrid td, #GameGrid th{
padding:0px;
position:relative;
}
and maybe add top:0px; to your #GameGrid > div > img. An example could help us to understand better your problem :-)
Resorted to modify the image file and removed the border around the grid. Created another div with an image of just the grid border and aligned it to the grid div.
I'm having an issue here. Simple layout with header, nav bar, and content divs inside of a container with 100% height, but I'm still getting a vertical scroll bar.
style.css
html, body {
margin: 0px;
padding: 0;
background: #E6E6E6;
}
#container{
width: 900px;
height: 100%;
position: relative;
left: 450px;
}
#header{
width: 900px;
height: 70px;
position: absolute;
background-color: #FFFFFF;
border: 1px solid black;
}
#navBar{
width: 900px;
height:20px;
position: absolute;
top: 77px;
background-color: #FFFFFF;
border: 1px solid black;
}
#content{
width: 900px;
height: 100%;
position: absolute;
top: 104px;
background-color: #FFFFFF;
border: 1px solid black;
}
according to your comment about overflow: hidden removing a border try this:
overflow-y: hidden;
that only removes the vertical scrollbar, like you asked.
Assuming that #header, #navbar and #content are children of container, the reason is quite obvious. #content is also set to 100% height and additionally has a top value. So, it's full height and then shifted down, of course resulting in a vertical scrollbar.
One solution would be to add
overflow: hidden;
to #container, but that would just cut the content. You need to calculate the height correctly:
#content { height: calc(100% - 106px); }
See the DEMO.
Additional information: I substract 106px due to the top margin of 104 plus 2px for the borders.
your height: 100% in the #container { causes this problem.
if you want to fix this, you have to set bottom: 0
JSFiddle
html, body {
margin: 0px;
padding: 0;
background: #E6E6E6;
height: 100%; /* added this to html,body*/
}
#content{
width: 900px;
bottom: 0; /* set this instead of height: 100%*/
position: absolute;
top: 104px;
background-color: #FFFFFF;
border: 1px solid black;
}
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.
i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?