Solved

2 columns - both fluid and floated - 1 with min width

Posted on 2014-04-07
15
150 Views
Last Modified: 2014-05-07
Hi

Im trying to float 2 divs alongside each other but 1 div needs amin-width of 300px

When i try this the right div drops. Why is this?

See my fiddle - http://jsfiddle.net/fj3C6/

Thanks
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
  • +1
15 Comments
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39982741
Hey there,
I saw your code , few things are wrong and need to be corrected
1. If you are making a container where you would float two classes then make sure that container is an id not a class.
2.You mentioned .left, .right { float:left } this is but obvious any changes that would overflow the container would drop the right div to float left.
3. Here's the code snippet which might help you


<style>
#container {
       width:100%;
      background:#000;}
.left {
    width:300px;
    background:#ff0000;
      float:left;
}
.right{
    width:70%;
    background:#999;
}
</style>
</head>
<div id="container">
    <div class="left">fer</div>
    <div class="right">ferwf</div>
    </div>

Feel free to ask for further queries
Thanks
~Dex
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39982750
Your code seems to be fine.  Your fiddle was messed up because you had the html in the s. I moved it.  http://jsfiddle.net/fj3C6/5/
0
 

Author Comment

by:coolispaul
ID: 39982769
Hi Dexter

1) why you need an ID?
3)

Why is .right 70%?
your example code still causes the right div to drop?

Cheers
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39982789
ref Scott's fiddle.

if you give your left div a min-width of 300px, and your overall container is too small, let's say for example the calculated width of the container is 400px, then your right div which is set to be 53%, will no longer fit in the container since the left div is now taking up more than 47% of the container.  

for what you are trying to achieve, you need a different approach. if you make the right container width: auto, then it wont drop, but your background color may not necessarily reach the right edge of the container. if you need the background color to "fill" the right div, then you need a completely different approach.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39982800
The container is 100%

If you are having issues, it might have to do with other aspects of your code.  Can you give us a link to your test page?
0
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39982801
Hey coolispaul
Well as you mentioned that your left div should be atleast 300px , to avoid confusion you should stick to one of the measurements .You need the results in pixels or percentage?
And it is coming normal and there might be another reason that your right div is dropping is that your browser zoom must be lesser or greater than normal.To optimise the divs in such a way that it remains static no matter how much you zoom in zoom out, you should prefer to percentage measurement.
I don't have much knowledge but the id tag is preferred whenever you use an overall container or something that would contain objects .
Another solution as stated by kyle is absolutely correct
<style>
#container {
       width:100%;
      background:#000;}
.left {
    width:300px;
    background:#ff0000;
      float:left;
}
.right{
    width:auto;
    background:#999;
}
</style>
</head>
<div id="container">
    <div class="left">fer</div>
    <div class="right">ferwf</div>
    </div>
<body>
You can use this method too


Thanks
~Dex
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39982816
>the id tag is preferred whenever you use an overall container or something that would contain objects

ID tags can only occur once per page where classes can be repeated.  If the same element has both a class and id and the css for each is different, the id will win.  The code below the color of "stuff" will be blue.
.red{color:red;}
#blue{color:blue}
<div id="blue" class="red">stuff</div>

Open in new window


Typically, I think it is best to keep your styles to classes.  Where you start seeing the importance of ID's and Classes is in targeting objects via javascript.

Otherwise, there is no real benefit to style your container by it's ID or CLASS.
0
 

Author Comment

by:coolispaul
ID: 39982821
ok thanks - that seems to work

why does the right div not get floated left aswell?
i though it had to be floated left to sit adjacent to the left column?

Thanks
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39982837
Both are floated left with this bit of css below.  The comma between the 2 classes means apply the same style to both.
.left, .right { float:left }

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39982840
yep i know that but in Dexter css thats not the case (but actually works how i intended) :

#container {
       width:100%;
      background:#000;}
.left {
    width:300px;
    background:#ff0000;
      float:left;
}
.right{
    width:auto;
    background:#999;
}
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39982847
If you only have 2 columns, that will works.  But if you added a third, they both need to be floated.  The right most container does not need the float.
0
 

Author Comment

by:coolispaul
ID: 39982865
why is that though - out of interest?

div is a block element isnt it? i thought only inline elements would flow left like that
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39982876
Let's experiment.

Both work http://jsbin.com/mefecofu/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
    width:100%;
    background:#000
    margin-bottom:10px;
    height:40px;
    border-style:solid;
    border-width:medium;
}
.left, .right { float:left;height:40px; }
.left {
    width:47%;
    background:#ff0000
}
.right{
    width:53%;
    background:#999
}
    </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
    <div class="left">fer</div>
    <div class="right">ferwf</div>
</div>
 <div class="container">
    <span class="left">fer</span>
    <span class="right">ferwf</span>
</div>
  
</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39982878
The right most element would first stick to the leftover container space after the left element acquired it's place.At such occasions we use <div class="clear"> to separate out the div .
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39982879
yes. the container is set to 100%. but if the page is only 400 px wide, then your container's calculated value is also 400px. Or if your container's container is 350px wide, then your container's calculated value is also 350px wide. It is 100% of its container.

what you stated as working, is not due to any of Dexter's CSS. it's due to setting the width to auto.

in fact, you can just remove the width completely, since width:auto is the default behavior.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question