Let's say i have a section with three divs side by side and the main div (center) occupies 50% of the space, 25% for the ones in the left and the right.
Now, i'm using media queries to display the site in best conditions on kindle portrait (600 x 1024).
Since it's a lower resolution, to make the site look better i thought in puttin the main column appear and in tho bottom of her put the two that was previously at side.
I was able with "float" atribute to put the main div on the left, but it happens that the other two don't go under the main one.
Is that even possible to do? I'm trying but i'm far far away of being able to do what i pretend.
Html code:
<section id="content">
<div class="main_1">
<div></div>
</div>
<div class="main_2">
<div></div>
</div>
<div class="main_3">
<div></div>
</div>
CSS:
#content{
border:0;
padding:15px 5px 15px 55px;
margin:0;
min-height:600px;
border:1px solid;
overflow:visible;
box-shadow:3px 0 4px rgba(0, 0, 0, 0.1);
overflow:hidden;
left:0px;
right:0px;
top:0px;
z-index:1;
}
.main_1,.main_2,.main_3{
display:inline;
float:left;
margin-left:1%;
margin-right:1%;
padding:9px 0;
min-height:10px;
}
.main_1{width:23.0%;}
.main_2{width:45.0%;}
.main_3{width:22.0%;}
The previous code was for high resolutions. Now for the kindle (600x1024) i used the follow to put the main div at right but the other ones are a mess on the left:
CSS:
.main_1,.main_3{
display:inline;
float:right;
margin-left:1%;
margin-right:1%;
padding:9px 0;
min-height:10px;
}
#content .main_2{
float: left;
}
SOLVED:
I don't know if it was the best idea in terms of code, but i duplicate my div of the left and put it hidden beetwen div center and right.
In media queries i just had to hide the div of the left and "activate" the one i had hide that was equal but now on the right side of the center div.
It would be nice if you always set the wider content first, and the last two in sequence and just that change will help you and will probably solve your problem, because when you don't have enough room for the smaller ones, they will fall under the first content box. Do you get it?
Doing this, you can float the wider element to the left and the other two to the right. Just don't forget that floating the other two elements to the right will invert their order, so you'll have to work your html a little.
Related
I am trying to prevent two side by side divs I have from overlapping in responsive layout.
Here is my html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
Here is the CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html
As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.
The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.
The following will work:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.
I have also floated the container to the right.
Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.
The problem is that your actual image isn't shrinking when the .image div is. So .image div will adjust according to its width percentage, but not the image contained within it. If you add a width: 100% to the img element, the image will now shrink along with the div container, and the text div won't overlap.
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;
}
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.
The following html and css shows two divs inside a container. The left div isn't floated; the right div is floated right.
The right div seems to be one pixel too narrow, and the red background color of the container is therefore showing through in that one pixel gap.
This is a simplification of my problem. http://jsfiddle.net/XPd9J/
HTML
<div class="inner-wrapper">
<div class="right-sidebar">
</div>
<div class="content">
<br /><br />
</div>
</div>
CSS
.inner-wrapper {
position:relative;
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
position:relative;
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
position :relative;
width:60%;
background-color:silver;
margin:0;
padding:0;
}
It's not the float that makes the problem. It's the percentage width. In FF and IE it works perfect, but Chrome calculates percentage width so, that not always the pixels sum up to the full 100%. Just try to slighty change the window width and you will notice the extra 1 px to disappear/appear sometimes.
How to avoid this behavior? You need to have use the same percentage somehow, so it is calculated just exactely the same. The right sidebar is 40% wide, so you need to have a right margin of 40% for the content div (these 40% are 40% of the containing block element)
http://jsfiddle.net/XPd9J/1/
.inner-wrapper {
background-color:red;
overflow:auto;
width:90%;
padding:0;
margin:20px 0 0 20px;
}
.right-sidebar {
width:40% !important;
background-color:lime;
float:right;
margin:0;
padding:0;
}
.content {
background-color:silver;
margin:0 40% 0 0;
padding:0;
}
Another easy option to get the full 100% is to set the parent element to overflow:hidden and your element to width:101%.
I also encountered that issue and I use two option the display:inline-table and display:table-cell in the parent div of the floated elements..although it is not a table, I use that as an alternative
For anyone coming to this in the future, it's possible to create left sidebar / content / right sidebar with liquid floats using the above method. It might be done like this:
Container div
right-sidebar width:30%;float:right;margin:0;padding:0;
content width:40%;float:right;margin:0;padding:0;
left-sidebar margin-right:70%;margin:0;padding:0;
End container div
Provided all the containers have margin:0;padding:0; then this works in FF, IE, Chrome, Safari and Opera (latest) without a problem. Genius. The dodgy browsers should have had this problem solved a long time ago - one can only guess that web designers don't often need pixel perfect placement of sidebars otherwise there would have been huge pressure on the browser builders.
You got two non-breaking spaces there. character causes the 1px extra space on the left of the right sidebar. Btw, position: relative is redundant in this context (it's only useful when you have to fix something in IE6).
Set "inner-wrapper" to overflow hidden (just in case). Then on the right div use calc(40% + 1px) to fix the issue.
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