It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
Related
The following layout 2 column layout will get screwed up by adding the <p>Hello</p>... Can anyone give me a clue?
<div style="width:1280px; font-size:0;">
<div style="width:640px; height:200px; background:blue; display:inline-block;">
<p>Hello</p>
</div>
<div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>
I could see if the height of the "p" was actually larger than 200px, but it isn't. So why doesn't it just go inside of its parent and stop messing with my layout?
To fix this, I ended up making the layout column divs relative, and using the absolute position on a child div that would be the container of the "p", but it seems like there is something obvious I am missing to make this situation simpler...
Inline-block does leave some whitespace that is undesired most of the time do to spaces in your code. The best solution I think is to float it and use 50% for the width.
div {
float: right;
width: 50%;
height: 200px;
background:blue;
}
the p tag will go in nicely.
example here on jsfiddle
other solutions and information here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Inline block items are vertically aligned as baseline by default. Add vertical-align:top
Jsfiddle Demo
div {
font-size:0; /* remove whitespace */
}
div div {
font-size:1rem; /* reset font-size*/
vertical-align: top;
}
I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.
Here is the code
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
CSS
#left{
float:right;
}
#right{
float:left;
width:100%;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?
JSFIDDLE
EDITED
I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE.
Should look like this
Use the following css :
#left{
float:right;
border: 1px solid black;
}
#right{
float:left;
position: absolute;
top: 0px;
}
#wrapper{
width:100px;
background-color: #000fff;
}
If you want place the right div before left, just remove the float:left property from #right.
Fiddle
If you want the right DIV above the left, you need to use absolute position
First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.
Check out this fiddle
If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.
Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.
Alternatively you can use JavaScript to change order in html.
I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:
#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; }
#left{
background-color:blue;
margin-top:30px;
}
#right{
background-color:green;
margin-left:-100%;
margin-top:0;
}
#wrapper{
width:100px;
background-color: #000fff;
}
Thank you all for your help so far. I updated the description, concept image, and JSFiddle link to make things a little clearer.
I have been wracking my brains on this seemingly small issue the whole day. My web dev friends are baffled and I could not find a suitable answer in my search of this site and others (though, I could have missed it somewhere along the way).
Here's what I am trying to achieve:
3 non-fixed-width DIVs within one fixed-width container DIV
The center DIV needs to be centered, and no larger than the text it contains.
The left and right DIVs need to fill the remaining space in the container DIV.
Here are some links to help communicate this concept:
This is what I'd like to end up with
Check out this JSFiddle Link
The basic HTML:
<div id="container" >
<div id="left" ></div>
<div id="center" >Text inside center should resize this block</div>
<div id="right" ></div>
</div>
Below, I removed most of the styles I have tried. This CSS currently centers the DIV (if I set it as an inline block), but I need the other divs to fill the left and right space remaining:
#container {
width:750px;
text-align:center;
border:3px solid #E85355;
}
#left {
background-color:#A3CB46;
}
#center {
background-color:#6D6E71;
display:inline-block;
color:#FFFFFF;
}
#right {
background-color:#1DB0CE;
}
I've tried floating, no-wrap, overflow, etc. Thanks a million to whomever can offer some help!
Try the following CSS. It fills the width of the container...
#container {
width:764px;
text-align:center;
}
#container > div {
display: table-cell;
}
#center {
background-color:#CDD7D7;
}
#right, #left {
background-color:#E85355;
width:200px;
}
EDIT: display:table on container, not needed...
Do you need this ?
CSS
#container {
width:764px;
text-align:center;}
#left {
background-color:#E85355;
width:20px;
height:20px;
float:left;
}
#center {
background-color:#CDD7D7;
display:inline-block;}
#right {
background-color:#65A8A6;
width:20px;
height:20px;
float:right;
}
DEMO
Try this:
jsfiddle.net/SHnc9/36/
You can do it with flexbox! Demo: http://dabblet.com/gist/7187048
Markup
<div class='container'>
<div class='box left'></div>
<div class='box center'>enter text here to see this box grow!</div>
<div class='box right'></div>
</div>
CSS
.container {
display: flex;
}
.box {
flex-grow: 1;
}
.center {
flex-grow: 0; /* to get the box to wrap closely around the text */
}
According to caniuse.com http://caniuse.com/#search=flexbox, it's supported in all the major desktop browsers with firefox having partial support which probably means it uses the old syntax / doesn't support some new properties but the demo worked fine when I checked.
Just be sure to use prefixes(or use a prefixfree / unprefix plugin), add the old syntax for old browser versions (add old syntax below the new ones).
Also, use display: inline-block as a fallback.
You may also want to check out flexie.js http://flexiejs.com/.
Essential reading:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to align two divs horizontally and I got it to work using display:inline-block
however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
Here's fiddle
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}
give parameters to width and height, so container can overflow.
http://jsfiddle.net/f5HWD/3
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
I altered your code slightly and made the contents float left.
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
Fiddle
Hope it helps.
How can I get two divs aligned in the same "row" on a website?
I have been working on this page, and I have tried to get a menu that floats to the left side of the website and then the content to the side of that.
I have tried using this as the div's CSS:
.menu
{
width:25%;
height:auto;
margin-bottom:2px;
float:right;
position:fixed;
}
.content
{
width:70%;
height:50%;
margin-bottom:2px;
padding: 25px;
float:right;
}
The page is not displaying them side-by-side and floating, but instead how most website such as: http://www.exorithm.com/, where they have a sidebar and an area for content.
Can anyone help?
All my code: http://pastebin.com/KqYkrweE
I think the problem is that you have position:fixed on the menu. If you use position fixed or absolute, it removes the element from the document flow, so float:right becomes irrelevant.
Edit: Here is a better example of achieving the same result
Also bear in mind that you are using percentages for width and then applying a pixel based padding. This could lead to the elements becoming too wide for the page and displaying one below the other.
70% + 25% = 95% with 5% left over.
If the 5% is less than 50px (making the whole width 1000px) then your columns will total greater than the entire width. A better approach would either be to use percentage based padding (not 100% sure how well this works) or to apply your padding, margins and borders to elements inside the floated columns, like so:
// CSS
.leftCol {
float:left;
width:25%;
}
.rightCol {
float:left;
width:75%;
}
.content {
padding:25px;
}
// Markup
<div class="leftCol">
<div class="menu">
Here is my menu
</div>
</div>
<div class="rightCol">
<div class="content">
Here is my content
</div>
</div>
Edit 2:
If you want your menu to stay on screen as the user scrolls down, then position:fixed will do the job. I looked at your page and it looks like you have a fixed width navigation of 206px. Therefore your styles for the existing markup would be better off as something like:
// CSS
.menu {
position:fixed;
left:0;
top:0;
width:206px;
}
.content {
padding: 25px 25px 25px 231px;
}
You are floating right instead of left.
Your .content has a padding of 25px on each side, which means 50px overall. Since your menu is 25% and the content 70%, if your container is smaller than 1000px you run out of space.