I have a page with some divs there.
HTML:
<div class="utilitiesHeader">
<div id="utilitiesLogo"></div>
<div id="utilitiesFIO">Name of user</div>
</div>
<div class="utilitiesContent">
<div class="utilitiesCommon">Comon</div>
<div class="utilitiesArchive">Archive</div>
<div class="utilitiesReadings">Readings</div>
</div>
CSS:
div#utilitiesLogo {
width: 226px;
height: 101px;
background: url("../images/feelinhome-logo.png") no-repeat 0 0;
margin: 0;
}
div#utilitiesFIO {
float:right;
font-size: 30px;
}
div.utilitiesHeader {
display:inline;
}
As you can see in fiddle div with Name for some reason is on the other string and logo div is in width of all page, however I give it certain width. What's the reason?
The problem is that you set the utilitiesHeader with display:inline but: width does not apply to an inline element! - so the utilitiesHeader won't confine the elements according to the width of the utilitiesLogo (which has a set width)
See the spec regarding the width property:
Applies to: all elements but non-replaced inline elements, table
rows, and row groups
To fix this set display:inline-block on the utilitiesHeader.
FIDDLE
Related
On a portion of a web site I have a container which contains two blocks. One panel that has a static width and a left panel that should fill the space to the left of the right panel. I have solved it today by having the following markup:
<div class="container">
<div class="rightpanel"></div>
<div class="leftpanel"></div>
</div>
.leftpanel {
overflow:hidden;
}
.rightpanel{
width: 200px;
float: right;
}
The problem here is that I need to declare the rightpanel before the leftpanel. I would like to be able to declare it like this:
<div class="container">
<div class="leftpanel"></div>
<div class="rightpanel"></div>
</div>
Any suggestions on what I should do? Help gladly appreciated.
Simply change the element being floated, then set the width of the flexibly sized element to that of the page minus the known width of the sidebar, by using calc
Demo Fiddle
Change your CSS to:
.leftpanel {
float:left;
width:calc(100% - 200px)
}
.rightpanel {
width: 200px;
overflow:hidden;
}
I have an issue and I can't find the right keywords on Google.. But it seems prettry "classic".
I have a webpage, let's say with a max-width of 1500px;
I want to add a line, with 5 "boxes" (div) of the same size each, separated with a margin.
So I set a width of 20%, and a margin-right of 10px. My issue is that my last div always goes down to the next line, because of the margin. (Because with the margin, the width of my line is higher than the max-width of the page).
If I remove the margin, all the boxes are correctly on the same line.
What should I do to make it work ? (Except using outerWidth of jQuery, it is my next step if I can't do it easily with css)
Here is my code the code I have now :
<div id="page">
<div id="numbers">
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
</div>
</div>
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
}
I also made a fiddle, to test : http://jsfiddle.net/jKMp5/
Thank you !
Solution : I just have to set the padding property on the .number, not the wrapper !
Or use box-sizing !
Thanks to everybody
Div's with a width percentage adds margins and paddings width on to that.
Meaning a div with width 50% amd margin-right: 20px; will be 50% + 20px.
You can do the following.
<div style="width: 20%;">
<div style="margin-right: 20px;"></div>
</div>
That will sort it out.
or just the following
.number
{
background-color:white;
padding-right:10px;
}
.numberwrap
{
float:left;
width:20%;
}
The problem is (as you already said) that the margin is affecting to each div making it bigger than that 20%, so one solution could be to tell to that div that the margin is included in the total width with the property box-sizing
So add:
.numberwrap {
box-sizing: border-box;
}
See jsFiddle example: http://jsfiddle.net/jKMp5/2/
In the default box modal,
The padding area extends the content area with the empty area between the content and the eventual borders surrounding it.
You can change this behavior using box-sizing property by applying box-sizing:border-box
border-box:
The width and height properties include the padding and border, but not the margin.
.numberwrap
{
box-sizing:border-box;
/*other styles*/
}
Demo
You can use disaply:table and display:table-cell:
css
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
display:table-cell;
/*border: 1px solid black;*/
}
#numbers{
display:table;
}
fiddle
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
I am trying to do a tableless
layout, and I have the following
HTML snippet:
<div class="slider-inner">
<div class="slider-pane">
<div class="container">
<p>...</p>
<div class="did-you-knoow">
<div class="facts">
</div>
<div class="marquee-container">
</div>
</div>
</div>
</div>
</div>
Which is styled w/ this CSS:
div.slider-pane {
width: 1024px;
}
div.container {
display: block;
}
div.facts {
margin-right: 60%;
}
div.marquee-container {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
margin-right: 0;
padding: 10px;
width: 60%;
}
I want the div.facts to occupy the left-40% , and the div.marquee-container
to occupy the right-60% of the div.did-you-know (their immediate parent). I
expect the div.marquee-container to be positioned relative to its parent, and
its width to be 60% of its parent, but its positioning and width are relative
to div.slider-inner, which is 2 levels above its parent.
How do I set the position and width of div.marquee-container relative to
its parent, and not the div three levels above it?
add position:relative to div.container
#locrizak's answer is correct, I needed to add 'position:relative' to the div.container, but I needed to add it to the div.did-you-know as well. In other words, I needed to set all of the containing div's to position:relative in order for the elements in question to be positioned relative to the immediate parent.
I found this was also answered in the MDN page for css position under the 'absolute' definition:
[The browser will] position [the element] at a specified position relative to its closest positioned ancestor or to the containing block
However the W3C reference was not as helpful.
To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in size as it should be.
Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don't work. How could I achieve such behavior?
http://109.91.124.194/nucleareducated_2/index.php
This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.
As you have probably guessed, it's pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.
IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.
#containerdiv {
display:table;
}
#childdivleft, #childdivcenter, #childdivright {
display: table-cell;
}
The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.
#leftdiv,#rightdiv {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
You can also use -
jQuery - Columns of Equal Height with JQuery
several other solutions - CSS - Equal Height Columns?
let me know if this is what you are looking for: tested in chrome*
<html>
<head>
<style>
html, body {
height:100%;
}
</style>
</head>
<body>
<div style="clear: both; height:100%;">
<div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
<div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
<div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>
</body>
</html>
Maybe this is what you mean? You can add a div around the left and right div if you want an area with 100% height.
CSS:
* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }
HTML:
<div>
<div id="around">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</div>