I have some floating elements on a page.
What I want is the div that is floated left to be "maximally wide" so that it is as wide as it possibly can be without causing the red div ("I go at the right") to spill over onto the next line.
An example is here: The width:100%; doesn't produce the desired effect!
** I don't want the green element ("I want to be as wide as possible") to go "under" the red element. Its very important that they both stay separate i.e. .. I think they must both be floated!
<div class="container">
<div class="a1">i go at the right</div>
<div class="a2">i want to be as wide as possible,</div>
<div class="clear"></div>
</div>
<style>
div
{
border: solid 2px #000;
background-color: #eee;
margin: 8px;
padding: 8px;
}
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 12px;
padding: 6px;
}
div.a2
{
float: left;
/*width: 100%;*/ /*this doens't produce desired effect!*/
background-color: #0b0;
border: solid 2px #0f0;
margin: 12px;
padding: 14px;
}
.clear
{
border: none;
padding: 0 ;
margin: 0;
clear:both;
}
</style>
Work with percentages:
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 2%px;
padding: 6px;
width: 8%;
}
div.a2
{
float: left;
width: 84%;
background-color: #0b0;
border: solid 2px #0f0;
margin: 2%px;
padding: 14px;
}
Play with the widths, heights and margins % to get the desired look. Just remember that margin: sets right and left margins therefore margin: 2% uses 4% of the wrapper's width. Margins + widths should sum 100%, in this case (2%*2)*2 + 84% + 8% = 100%.
Related
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
Needing to have 2 divs side by side
I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
http://www.w3schools.com/cssref/func_calc.asp
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{
margin:0;
}
.containersearch
{
border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width:100%
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
input[type=text]
{
position:relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image:
url('http://findicons.com/files/icons/2226/matte_basic/32/search.png');
background-repeat: no-repeat;
background-position: right;
background-color: white;
padding: 12px 20px 12px 10px;
}
input[type=text]:focus {
width: 100%;
}
<body>
<div class = "containersearch">
<form>
<input type="text" name="search" placeholder="Search.."/>
</form>
</div>
</body>
my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?
http://codepen.io/anon/pen/xujAC
There's the codepen of my code. The red and blue background are for visual reference only.
Shouldnt the blue background (.container) only extend 20px below the blocks?
Pretty new at this and learning as I go. I'm probably missing something easy.
Thanks a lot.
You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.
Other things that throw this off are:
floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.
Demo fiddle
Updated CSS:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background-color: #dcdcdc;
position: relative;
}
#content {
position:relative;
margin: 0 auto;
width: 960px;
min-height: 500px;
max-height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 2px 2px #111;
background-color: red;
padding: 20px;
padding-top: 0;
}
#banner {
width: 900px;
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
top: 15px;
left: 30px;
height: 100px;
box-shadow: 0 2px 0 #ddd;
}
#banner h2 {
color: #555;
text-shadow: 0 -1px 0 #000;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
background-color: blue;
}
.blocks {
display: inline-block;
width: 250px;
height: 150px;
background-color: #666;
margin: 25px;
margin-top: 30px;
}