CSS float with min-width and margin

Question

I was hoping you might be able to help with a problem that's been driving me nuts for a few hours now. I am trying to design a page for a search engine that can add X number of criteria and then perform a search. I'm trying to get the criteria box to re-size depending on the number of criteria, and the screen resolution. I want it to load at an initial size, and then resize itself depending on what's added to it, so that the search button and search results below move downwards. Right now, I can do this using a min-width:100%, but this produces scrollbars and the text overflows onto the right of the page because I'm using a margin-left:340px; to move this box to the right, as there is another box to the left of it, searchList.

Removing min-width causes the scroll bars to go away, but then the box is not drawn until an element is added. Adding one element causes a small box to be drawn, and only after adding a few does the whole box go to the right size. Is there some way I can move the box sideways and keeping it in line with the rest of the page, and what is the best way to achieve this?

It's the same on both chrome and firefox.

The box I'm talking about is <div id="searchCriteria"></div>. Full code is below. I would really appreciate any help :)

<html>
<head>
<style type="text/css"> 

body {
padding:0px;
margin:0px;
}

#content {
min-width:950px;
}

#header {
height:130px;
background-color:blue;
}

#searchList {
width: 300px;
height: 400px;
background-color:green;
position:absolute;
}

#searchCriteria {
background-color:red;
float:left;
min-height:400px;
min-width: 100%;
margin-left: 340px;
}


#searchResults {
background-color:purple;
height: 800px;
width: 100%;
float:left;
}

.criteria {
border: 1px solid black;
padding: 10px;
margin: 10px;
float: left;
width: 400px;

}

#buttonAndStatus {
float:left;
background-color:pink;
width:100%;
text-align:center;
}



</style>

<script type="text/javascript">

function add(){
    $("#searchCriteria").append("<p class=\"criteria\">This is a bit of search criteria.</p>");
}

</script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
    <div id="header">fasdfasdfasdf asdf asdf asdf asdf asdf asdf </div>
    <div id="content">
            <div id="searchList">
                <input type="button" name="button" Value="Click me" onClick="add()">
            </div>
            <div id="searchCriteria"></div>
            <div id="buttonAndStatus"><input type="button" name="button" Value="Search "></div>
            <div id="searchResults">asdf asdf asdf asdf </div>
    </div>
</body>
</html>

make a jsFiddle out of this, which clearly describes your problem, so that we can test it out and try to come up with a solution — jakee
– jakee, Commented Dec 3, 2012 at 13:31

Digital Robot Gorilla · Accepted Answer · 2012-12-03 13:33:28Z

1

You are getting horizontal scroll because you're telling the browser to be at least 100% in width. Just tested it, it works with max-width not min-width and add a min-width of the smallest width you'll have i.e:

#searchCriteria {
    background-colour:red;
    float:left;
    min-height:400px;
    min-width:350px; /*min width of criteria box*/
    max-width:100%; /*you don't want the width to be more 100%*/
    margin-left:340px;
}

answered Dec 3, 2012 at 13:33

Digital Robot Gorilla

3971 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Provster Over a year ago

Thanks a lot for that! Is there any way of making the box default to the full width available even with nothing in it? min-width works but I can't use that to scale to the size available according to browser window size

Digital Robot Gorilla Over a year ago

There is, but there are quite a few elements to take into consideration i.e. are the #searchList and #content a fixed sizes? Does the searchList positions have to be absolute? etc

Provster Over a year ago

#content - I'm just using this as a wrapper to enforce a minimum size on the whole page so if you make the browser window small, it won't look retarded. #searchList - this will always be a fixed size. I'm using absolute positioning because it doesn't need to float, and I did this because i couldn't seem to get it and #searchCriteria to stay in line using float. #searchCritera always wanted to be on it's own line.

Digital Robot Gorilla Over a year ago

There are few things you need to think about in that case. i.e. if you have the criteria fluid, but have the list fixed where will the criteria go if the window is shrunk down? Also the total pixel width cant add up to more than the #content width, otherwise it will start to look messy. My advice would be to ditch the #content, make the #searchCriteria width:68%; and make the #searchList width:32%;. This would be a good starting point.

A McGuinness · Accepted Answer · 2012-12-03 13:58:39Z

0

Hi to make content fit the page use width:100% and min-width on #content.

answered Dec 3, 2012 at 13:58

A McGuinness

8810 bronze badges

Comments

Carol McKay · Accepted Answer · 2012-12-03 14:46:13Z

<html>
<head>
<style type="text/css">

body {
padding:0px;
margin:0px;
}

<!--
#content {
min-width:950px;
}
-->

#header {
height:130px;
background-color:blue;
}

#searchList {
width: 300px;
height: 400px;
background-color:green;
position:absolute;
display:block;
}

#searchCriteria {
background-color:red;
float:left;
min-height:400px;
width: 100%;
<!--
margin-left: 340px;
-->
}


#searchResults {
background-color:purple;
height: 800px;
width: 100%;
float:left;
}

.criteria {
border: 1px solid black;
padding: 10px;
margin: 10px;
float: left;
width: 400px;

}

#buttonAndStatus {
float:left;
background-color:pink;
width:100%;
text-align:center;
}

ul.columns {
    display:block;
    float:left;
    width:100%;
    margin:0px;
    padding:0px;
    list-type-style:none;
}

ul.columns > li {
    display:block;
    float:left;
    width:100%;
    margin:0px;
    padding:0px;
}

ul.columns li.auto {
    min-width:400px;
}

ul.columns li.auto.searchCriteria {
    padding-left:300px;
}


</style>

<script type="text/javascript">

function add(){
    $("#searchCriteria").append("<p class=\"criteria\">This is a bit of search criteria.</p>");
}

</script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
    <div id="header">fasdfasdfasdf asdf asdf asdf asdf asdf asdf </div>
<!--
    <div id="content">
-->
        <ul class="columns">
            <li class="auto">
                <div id="searchList">
                    <input type="button" name="button" Value="Click me" onClick="add()">
                </div>
            </li>

            <li class="auto searchCriteria">
                <div id="searchCriteria"></div>
            </li>

            <li>
                <div id="buttonAndStatus"><input type="button" name="button" Value="Search "></div>
            </li>

            <li>
                <div id="searchResults">asdf asdf asdf asdf
                    <ul>
                        <li>blah</li>
                        <li>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </li>
                    </ul>
                </div>
            </li>
        </ul>
<!--
    </div>
-->
</body>
</html>

Thanks for the reply! The only trouble with this is that the red #searchCriteria box is now covered by and underneath #searchList, which is positioned absolutely. If you click the "click me" button you will see new items are hidden
this has been updated to fix the problem of hidden items, note ul.columns li.auto.searchCriteria { padding-left:300px; }

Paul D. Waite · Accepted Answer · 2012-12-03 15:21:41Z

0

How about if you float #searchList, and don't float #searchCriteria? (Thus removing the need for min-width: 100% on #searchCriteria.) Does that provide the layout you're looking for?

http://jsfiddle.net/uDtJ3/1/

edited Dec 3, 2012 at 15:21

answered Dec 3, 2012 at 13:59

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

3 Comments

Provster Over a year ago

Thanks for that - I just tried that but it doesn't seem to make any difference on Chrome or Firefox

Paul D. Waite Over a year ago

Oh, of course, sorry - box-sizing doesn't have any effect on margins, silly me.

Paul D. Waite Over a year ago

@user1872553: have edited my answer with an approach that has at least some chance of working.

Collectives™ on Stack Overflow

CSS float with min-width and margin

4 Answers 4

4 Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related