I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
Related
Right now I have a main div with an id of "wrapper", and inside this div I am trying to make two other divs that take up about the entire width of "wrapper". The first div, "sidebar", is narrow and contains some information I want displayed on the far right of "wrapper". The second internal div I have will be dynamically updated using php and javascript from data inserted by users, id called "maincontent".
I can get them positioned inside "wrapper" fine at first. The problem comes when new content is added in the "maincontent" div. When new content is added the "sidebar" div will move down proportionally to the height of the newly added content.
So, my question is this:
How do I get the two internal divs to maintain their positions on the top of the page while still being able to extend dynamically downward without anything moving around?
you need to float:left your left-content:
see the css below:
.wrapper
{
margin:0;
padding:0;
top:10px;
width:100%;
height:500px;
background-color:yellow;
}
.left-content
{
position:relative;
width:20%;
background-color:red;
height:100%;
float:left;
}
.main-content
{
position:relative;
width:80%;
left:20%;
background-color:green;
height:100%;
}
where your divs are as below:
<body>
<div class="wrapper">
<div class="left-content">
</div>
<div class="main-content">
</div>
</div>
</body>
what's important is, you accurately divide the width of the parent to the child containers
i.e. total width of child containers <= parent width
see, you need to learn about position attribute of css-style
when you do position:relative for any container, css properties like top, left,right,bottom starts working for them.
Check out my fiddle, the Javascript is completely unnecessary. Let me know if it helps you, or if you have any questions left. The most important part is having float: left or float: right in both the maincontent and sidebar.
http://jsfiddle.net/y89zp/
I have a problem with footer positioning. It doesn't go to the bottom/last.
So, I have a container div which has 3 divs - float:right , float:left and the center one (which has position:absolute) that comes between the two floated divs.
The center one must have fixed width and height because it's an image.
In that center div I have another div with a lot of content.
The problem is, because the center div has fixed width and height, it doesn't take the childs div height.
So my problem is how to put the footer that it comes last (after the container)?
Note - with JQuery I put the width of the floated divs because they take 100%-980px width.
This is how it looks like.
I tried putting to the center div overflow:auto,overflow:overlay,margin-left:auto;margin-right:auto;.
After reading your question again an again i come to conclusion and create the below fiddle using your code and embed a sample image for you desired size.
Please let me know if i am wrong while understanding your question. So i can work around according your needs.
fiddle: http://jsfiddle.net/ah3nr/6
Demo: http://jsfiddle.net/ah3nr/6/embedded/result/
My approach:
I have remove the position:absolute from center div and added new div for image and relate them both using css layer techniques.
Updated css:
.sectionDownContainer {
width: 980px;
/*height:270px;*/
border:1px solid red;
/*position: absolute;*/
position:relative;
top: -32px;
z-index: 1;
}
/*.sectionDownMenu {
margin-left: 50px;
margin-top: 1px;
display: block;
}
*/
#image_container {
position:relative;
width:980px;
height: 270px;
margin-top:-2px;
z-index:2;
}
.sectionDownContent {
width: 640px;
margin-top: -190px;
margin-left: 50px;
position: relative;
z-index:5;
color:#000;
font-weight:bold;
}
Screenshot:
Try this for the parent.
overflow:auto;
Also refer to this stack overflow post: Expanding a parent <div> to the height of its children
You need to set this property of the center-div: height:auto (you could also add a minimum height: min-height:400)
About your second question with the footer, this is much more complicated. You must do this:
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
I'll give you now the full CSS (because it's not so easy):
.content {position:relative; overflow:hidden;} //hidden overflow just a hack for common issues...
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:auto; float:right} //for tests you can also set a fixed height
This solution is also according to other threads on Stackoverflow: Align DIV's to bottom or baseline, How to align content of a div to the bottom?
But, if you experience problems with that, you may do this (my preferred solution):
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
</div>
<div id="footer">
</div>
And its CSS:
.content {position:relative; overflow:hidden;} //hidden overflow is just a hack
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:xxx; float:left} //you can use any height...
Note that all above solutions works only if you set all the "contents" to float, it doesn't work with absolute values! I found this here: http://wiki.answers.com/Q/How_can_a_parent_DIV_wrap_around_child_DIVs_which_are_floating_left_or_right
This is due to an issue with divs: It's not possible to "tell" a parent div the size! So childs like "content_center" or "content_right" won't tell the "content" how long they are and how long "content" must be. So it's impossible to tell the footer where to align, if you use absolute values for the childs.
So your second question, although it looks trivial, is a very important question, and not easy to solve.
IMPORTANT UPDATE:
I tried to find a solution with absolute now. The problem is, that absolute and fixed are taken out of the regular (text)flow, so their size can't influence the size/positioning of any other element anymore. But we also have to understand that an absolute element still controls all its childs, so we should rather set the childs as relative than the parent (here: "content")! So I finally found the solution, and it's quite weird, because it's almost the opposite thing I suggested above, but that solution was influenced by the posting of others, while following solution is "my own" one (I added a header for demonstration purpose):
<div id="header">
</div>
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
The CSS (the "header" clearly shows, that "content" inherites all positioning to its childs like "content_left", "content_right", aso.):
.header {position:absolute; left:0; top:0; height:100; width:100%}
.content {position:absolute; left:0; top:100; height:auto; min-width:700} //min-width is only voluntary, but quite useful
.content_left {position:relative; left:0; top:0; width:200; height:auto;} //height:auto is important to adapt the height from containing text!
.content_center {position:relative; left:200; top:0; right:200; width:auto; height:auto;} //in the middle element, also auto-width is important!
.content_right {position:fixed; right:0; top:0; width:200; height:1000;} //we set a fixed position, but that won't influence the footer anymore!
.content_footer {margin:0 0 60 0; position:relative; left:0; bottom:-60; width:100%; height:150;} //a fixed height is also okey...but relative position is needed!
//you still need to add margin:0; border:0; padding:0 or similar values for some elements to get a good layout
The important point here is, that you can decide which child element will be the longest one, and set this element's position:relative, while the other may have absolute or fixed. But if you don't know which element will be the longest, all child's positions need to be set as relative. Anyway, I suggest to set all childs to relative (beside fixed if needed), because their parent "content" will set their absolute height-position already correctly, so there's no need for any absolute at all.
I'm repeating myself: Above I wrote it's not possible to tell a parent div the size...actually it's possible, but not if the values absolute and fixed are used. Only if you use the browser standart value (static) or relative, the parent div will be informed about the size of its childs, an therefore the footer is set correctly at the bottom of the page.
Well, my solution works everywhere...even in IE (tested 6.0 and 8.0!) due to the hack margin:0 0 60 0 where the value 60 should be the positive value of bottom:-60. Now we finally got the non-floating crossbrower-solution. ;)
The problem you're experiencing is that certain CSS properties cause elements to be "removed from the flow" of the document (see the W3C Visual formatting model). Parent elements naturally grow to fit the height of children elements, however, floated and absolutely positioned elements are removed from the document flow. As mentioned in a few comments, setting overflow: auto; or overflow: hidden; on the parent element re-establishes a bounding box around floated elements. This means you can float elements within the parent container, then set overflow: hidden; on the parent element, and the parent element will contain the floats. However, this doesn't work for absolutely positioned elements: the absolutely positioned box is "removed from the normal flow entirely (it has no impact on later siblings)". The only exception is that the entire document will try and grow to display any positioned elements (give an element position: absolute; top: 3000em; and the page scrollbar will grow to allow you to scroll to that element). I don't know of any way to trigger this for elements other than the document.
Back to your intended effect… If you don't need IE7 support, you can use display: table; table-layout: fixed; to achieve a centered column with a fixed width and two columns of variable width on either side.
jsFiddle Demo
In the near future, this will also be possible using the CSS "flexbox" properties. Flexbox will allow for some nifty new features, including horizontal and vertical centering, changing the order of rendered elements, and setting "flex" values for how much of the remaining variable width an element should take. However, the standard is currently going through a period of flux, and the old standard (enjoying moderate support) is being replaced by a new standard (with little to no support). See "Old" Flexbox and "New" Flexbox and the accompanying demo. Considering the glacially slow progress of web standards implementation, I don't expect to see this in use for a few years unless a truly masterful polyfill is produced.
I am making a menu that is a div with with:100%; and height:45px;
each element inside the menu are divs. My goal is to make it adapt to any screen resolution so I start by placing the first div with a margin-left:2%;but the for the next one I am not sure of what I must use.
I could make the first element in float:left; and use margin like margin-left:10%; but then if we change the screen resolution it's not good anymore. If I don't put anything it goes under the first button. If I use the margin-left in px it won't be good because of the first margin-left:2%; How can I achieve this?
This is what I curently have(you can see that the buttons get under the first one):
Why don't you use display:inline-block; and whatever the margins that are great for you?
Meaning that, the first element can have 2% and the second one as well:
<div id="menu">
<div class="element">1</div>
<div class="element">2</div>
</div>
#menu{
width:100%;
height:45px;
background:#f00;
}
.element{
background:#0f0;
display:inline-block;
margin-left:2%;
}
I think you should provide something like a jsfiddle source when asking these type of questions :)
The situation is:
HTML:
<div id="main">
<div id="a"></div>
<div id="b">Some Text</div>
</div>
CSS:
#a{
float:left;
width:800px;
height:150px;
background-color:#CCC;
}
#b{
width:1000px;
height:100px;
background-color:#9CC;
}
The result:
Why doesn't the text go behind div#a ? Why does "Some Text" behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?
UPDATE:
When I mean under, I mean beneath on the Z axis, not on the Y. The div's should stay in this position, the only part that needs moving is the text.
http://www.w3.org/wiki/CSS/Properties/float
leftThe element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top.
The content of #b is acting as it should. It floats to the right side of the floated element preceding it.
Thus, if you want a 'layered' effect, use a CSS declaration that will provide it properly: position
Note: to keep #a positioned to it's parent, rather than <body>:
#main { position:relative }
#a { position:absolute }
If you float one element, the next element will "touch" it if there is place for it and it is a block level element (native or set by CSS).
If you want the elements "not" next to each other, than don't use float! Keep in mind that they have to be block level to go underneath each other.
Float does not "lift" element up, like for example position: absolute would do.
check out this:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I think z-index statement may also be useful
ADDENDUM
<style type="text/css">
<!--
#id {
position:relative;
}
#a{
/* float:left; */
position: absolute;
top:0%;
left0%;
width:800px;
height:150px;
background-color:#CCC;
z-indez:1;
}
#b{
position: absolute;
top:0%;
left0%;
width:1000px;
height:100px;
background-color:#9CC;
z-index:-1;
}
does the trick (in chrome, ff, IE6 ) I couldn't get it to work until I gave id=b a negative z index trust thats helpful
The floated element floats to the left of non-floated elements like the blue element. To force the blue element below the floated element, you could apply clear: left; to it.
If both of your div ID's have float:left assigned then the second div #b will follow suit and go beneath #a
Add this code:
float:left;
to #b style
Give display block to both #a, #b
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}