I'm intentionally pushing my link text below their containing <div class="box">
The problem is that the wrapper doesn't include the link text. How do I get it to encompass said text?
Here's the fiddle.
<div id="wrapper">
<div class="box lowest">Home</div>
<div class="box medium">About</div>
<div class="box">Products</div>
<div class="box medium">Services</div>
<div class="box lowest">Contact</div>
</div>
#wrapper{
width: 600px;
margin: 0 auto;
text-align: center;
border: solid 1px green;
position:relative;
white-space: nowrap;
letter-spacing: 15px;
}
.box a{
padding-top: 105px;
display: block;
}
.box{
width:75px;
height: 100px;
background-color:red;
border: solid 1px black;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
.lowest{
margin-top:50px;
}
.medium{
margin-top:25px;
}
Screenshot
To #wrapper, add:
padding-bottom: 30px;
The problem here is that you've already set a specfic height to your .box div and pushing your anchor tag by a padding of 105px. This increases the size of your div, height is set fixed at 100px, the wrapper still thinks your div is 100px high.
Either set the appropirate height to the box div (height of the div with the red bg plus the padding and the height of the anchor tag) or use simply use min-height instead of height.
Related
I'm having some troubles with the 'float' in css.
I have a wrapper div with a width of 960px.I want to add 5 child-div in it with the width of 960 / 5 = 192px. And this is what I've got:
https://i.stack.imgur.com/R6bsw.png
This is my lines of code. Can anyone tell me what's wrong with them?
HTML
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}
<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</section>
For each sub-boxes you have 1px of border which successively adds up to the total width.
So the container should have a width of (192+1+1)*5 = 970 and not 960 if you want all your sub-boxes to be contained on one line. You can also suppress the border or use a sub-box width of 190 (190+1+1=192)
Furthermore keeping 1px of free width space for the container can also help
About box-sizing:border-box:
The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
For Fix it:
So, you must use box-sizing:border-box; because width of .box(192px) includes .box border width (1px for border-left and 1px for border-right).
if you don't add box-sizing:border-box,it will be added 2px(1px for border-left and 1px for border-right) to each .box,in the other words width .box gets width (192px + 2px = 194px).
* {
box-sizing:border-box;
}
* {
box-sizing: border-box;
}
.container {
width: 960px;
}
#overall-info h1 {
text-align: center;
padding: 1em;
}
.box {
width: 192px;
height: 192px;
border: 1px solid green;
background-color: aquamarine;
float: left;
}
<section id="overall-info">
<div class="container">
<h1>Info</h1>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
Your 1px borders are adding-up to the width space of your boxes.
set in your css:
* {box-sizing: border-box; }
you can also use percentages widths btw to welcome yourself into the responsive era ;)
.box {
float: left;
box-sizing: border-box;
background: aquamarine;
border: 1px solid green;
width: 20%;
height: 100px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
in which box-sizing set to border-box is used to account borders, paddings and width into the inner box model width of the targeted element.
If you plan to support IE7 (which is not needed today) than you'll have to manually subtract the border-width from the element width.
Why is the container with the background colour f0f0f0 not centering for me? I gave the parent element the css style of text-align: center but it seems to ignre it?
http://codepen.io/ELiHimself/pen/qOXVYJ
<body>
<header></header>
<section class="container">
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
</section>
</body>
sass
*
margin: 0
body
text-align: center
.container
max-width: 1170px
padding-top: 100px
background-color: #f0f0f0
header
height: 100px
background-color: red
.box
padding: 100px
border: 1px solid black
display: inline-block
section is a block level element. Apply:
.container {
...
margin: 0 auto;
}
to your container and it should work fine.
You need to set
.container {
margin-left: auto;
margin-right: auto;
width: /* your width */
}
This should to the trick
i've been looking around to fix this, i havent seen a good answer on why this happens and how i can fix it..
basically i have a div that i set to 100% width and height, inside i have like a tabs section like on a broswer, i added a margin and padding to the main area, and when i set the tabs div to full width it sticks out some pixels, whats the correct way to deal with child divs sticking out of parents divs when playing with %'s and margins/padding
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
demo : http://jsfiddle.net/S8RC3/
By simply removing 100% from the DIV elements.
DEMO
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
DIV as being a Block level element is already wide as it's parent container.
Additionally you have a typo: </br> should be <br />, <br/> or <br>
For your padding and border, use box-sizing: border-box;.
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)
I'm trying to put 2 divs in one row but when i manage to do that - main container's HEIGHT is not adjusted correctly:
<div class="container">
<div class="info">Text</div>
<div class="controls">
<button value="Accept">Accept</button>
<button value="Decline">Decline</button>
</div>
</div>
CSS:
.container{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:1px solid #800000;
margin: 8px;
height:auto;
}
.info{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.controls{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 130px;
padding: 8px;
border-left: 1px solid #000;
background-color: #D4D0C8;
float: right;
}
button{
width:100%; // what ever you want it to be
}
jsfiddle
how do I fix the container height?
This is a common problem with float-based layouts: the container does not stretch to accomodate the height of its floated children. There are two simple solutions to this problem:
Adding a div to clear:both (as AliRiza recommends in another answer).
Adding overflow:auto to the container.
I would advocate for using the latter method because it does not involve adding an HTML element just for the sake of presentation. See more info on this here.
It can be implemented like this:
.container {
overflow:auto;
}
JS Fiddle Example
add <div style="clear:both;"></div> at the end of container div
<div class="container">
<div class="info">Text</div>
<div class="controls">
<button value="Accept">Accept</button>
<button value="Decline">Decline</button>
</div>
<div style="clear:both;"></div>
</div>
edited DEMO
css
<style>
div{
width:100px;
height:100px;
display:inline-block;
border:1px solid #ccc;
vertical-align:top;
}
</style>
html
<div>your div 1</div>
<div>Your div 2</div>
The vertical align is to keep it at the top if u add different amount of text and images as it goes down lol