I was hoping I wasn't a beginner with css, but I can't understand why the following happens...
You can see an example here
I wish to display 2 separated div on the same "line" :
First div must 100% width to the second
Second div at the extrem right of the first
So, I've done the following
// CSS
.div2 {
background:#EDEDED;
float:right;
}
.div1 {
background:#CCC;
}
.div1, .div2 {
padding:4px;
margin:4px;
}
.round {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>
But the .div2 is inside the first div...
How to display something like following ? (Like I thought it should be displayed...)
Any help appreciated...
EDIT : SOLUTION
By user570783
.div1 {overflow:hidden;}
Work like a charm, but not really documented, why this works ?
float does what is says. float. as in stuff can be underneath it. Text will be wrapped, but borders won't
if you know the width of "Test 2", you can add a "margin-right: x;"
OK, there are many solutions here involving, floats, inline-block, margins and borders but all require knowledge of at least one element's size.
However!
There's a trick you can do here. If you add 'overflow:hidden' to the first div it will force the div to 'block formatting context'
This will get the result you're after, with dynamic sized right floating element.
To make this work in IE5 and 6 you need to trigger 'hasLayout' on the first element, so position: relative;
fiddle
Related
What is the best way to wrap text where the indentation is set by the word before it, so that any wrapped text will continue with the same indentation. Like this:
http://i.imgur.com/61rVCQk.png
I made a JSfiddle to work with as well - http://jsfiddle.net/dangoodspeed/DbYFb/1/
.left { float:left; font-weight:bold; margin-right:.5em; }
I know I can do it with a table for each line, but there has to be a better way.
This seems to produce exactly the effect you need, according to your screenshot. You said you didn't want tables. Those aren't exactly tables, just divs that behave like table cells :)
http://jsfiddle.net/DbYFb/18/
Rows are wrapped in a div that behaves normally, while both columns are given display: table-cell to get the effect you want. Whether this is a better way than using an actual table is up to you.
<div class="row">
<div class="left">Name:</div>
<div class="right">John Doe</div>
</div>
.row div {
display: table-cell;
}
if you float element, give them a width and add overflow:hidden to element aside in the flow, you get it :
http://jsfiddle.net/DbYFb/3/
.left {
float:left;
font-weight:bold;
margin-right:.5em;
width:5em;
}
.right {overflow:hidden;}
see http://css-tricks.com/all-about-floats/ for more about floatting elements :)
I'm having some trouble getting this done 'right'...
its a two parter. :)
1.) is getting the layout to look like how I need it (without resorting to tables!), but for some reason I can get the divs and nested divs to 'act right'... (surely its my error/mis-understanding)
I am trying to get a layout like so, using only DIVS and display..etc..
http://dmstudios.net/misc/layout.jpg
I have attempted it myself (so you dont think Im just looking for a handout) :)..
but some things like the vertical alignment of the custom div container isnt working..etc
Here is my JSFiddle attempt: http://jsfiddle.net/yeKxU/1/
JSFiddle Code:
<div class="container">
<div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
<div class="custom">
<div class="president">item1</div>
<div class="mission">item2</div>
<div class="active">item3</div>
</div>
<div class="url">www.nike.com</div>
<div class="freetext">random text</div>
</div>
CSS:
* {
border: 1px dashed blue;
padding:0;
margin:0;
}
div{
display: inline-block;
border:2px solid;
border-radius:2px;
border-color:#FF0000;
}
.container{
width:450px;
padding:0;
margin:0;
}
.logo{
padding:0;
margin:0;
}
.custom{
vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/ /*needs to auto stretch to fit the rest of the space after image*/
}
.custom div{
display:block;
background-color:#EEEEEE;
}
.url{
width:100%;
}
.freetext{
width:100%;
}
Couple notes: the '3' fields to the right of the image div, will have varying data in them.. (meaning I am not clear if they will need to wrap or not...hopefully not a problem)
The second portion of the question, is about implementing some dynamic capabilities. (jQuery I imagine should work)..
2.) Knowing the general (perfect scenario) layout I am trying to achieve above...
I need to also code things in a way.. that is certain parts of the data are MISSING, then that 'cell' (div) is removed/hidden (or something)
*(I am building this using PHP printed to screen, to spit out the HTML/DIVS..etc and using variables to populate the content of the DIV/image..etc)
So for example..
if the IMAGE was not there (variable is empty).. Id like the the CUSTOM div that has 3 child divs in it 1 for each of the text fields) to expand all thew way to the LEFT.. as the logo/image DIV will have nothing (or be removed/hidden since its empty)
Same goes for the text fields in the CUSTOM DIV container.. if one of those fields are BLANK... its should NOT just have a blank/empty placeholder... it should be removed/hidden.. and the rest of the data butted up to the TOP (under any other fields that may be present)
I've seen examples (sorta) where you have some DIV blocks on the stage.. click on one.. it removes it.. the other DIVS move over...etc... (sorta the same thing, except I cant manually click things to remove them)..
So maybe some jQuery to go through the 'DIVS' see if its empty and then remove itself?
-or-
would just having some sort of layout that is fluid/liquid work? be better? so I dont really need to check if its empty.. if nothing is IN the cell/DIV.. then the other just adjust their WIDTH/POSITION to make-up for it?
Let me know what you guys think? JSFiddle examples are appreciated!
Thanks!
to get the layout in question one you do like this...
#divA {float:left;}
#divB {float:left;}
before divC you can put an empty div (id="empty") like this...
#empty {clear:both;}
this should fix the design, assuming you have your width seth on the divs...
for question 2 i suggest you create the divs dynamically, when you create your content on page... if you want examples, just let me know...
There are a lot of properties you can set on your divs, one is max-width... one risk of not setting any value on width on your divs is that if your total width get wider than your holding container your divB will stack up under divA... and i think you dont want that to happen... :) you can do some experiments with min-width and max-width on your divs to get the behavior you want because i guess you have some values on your pic to play with...
divA {
float:left;
max-width:50px;
}
divB {
float:left;
min-width:400px;
}
as example, you have to find your values, trial and error-way i guess...
there is also a lot of guides on internet if you search on css and positioning... happy hunting!
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 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)...
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;
}