Float Affecting Width.

[shadowayex]

So, a div has a default of 100% width. We all know this.Apparently, when you add float: left; to it, the width goes away.Is there a way around this?

[jeffman]

You can have 2 divs side by side. Div 1 has float:left . Assign it whatever width it needs. Div 2 has no float property. It will align itself to the right of Div 1, on the same level, not below. Since it has no float property of its own, it will fill the space between Div 1 and the right edge of the viewport, and it's width will remain fluid.Any help?

[Synook]

width:100%?But if it is 100% width you don't need to float it

[shadowayex]

The reason it's floated is because of the things inside of it are floated, but deirdre's dad's idea works for the most part, besides it need to have the other div's height for border reasons. That's why this whole thing is an issue is because of borders.Is there any way to just recover the lost width property?

[Jerry62704]

The reason it's floated is because of the things inside of it are floated, but deirdre's dad's idea works for the most part, besides it need to have the other div's height for border reasons. That's why this whole thing is an issue is because of borders.Is there any way to just recover the lost width property?

A div doesn't have to be floated because it has floated elements inside of it. Further, if it is floated, it has to have a width. Do you have a link we can look at?

[shadowayex]

I'll have to make a sample page because of the security. I'll get that done later.

[shadowayex]

Ok, here's what it looks like with the float property:And without:

[shadowayex]

So, there's still no answer so I figured I should better explain the code and what's going on. Firstly, those pictures show what it looks like with and without the float on the outer div. An example of code that would explain the outer div is:

<div id="type3" class="visible">    <div class="column">        <h3>account.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/account.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>admins.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/admins.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>admintools.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/admintools.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>chatroom.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/chatroom.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>friends.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/friends.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>index.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/index.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>login.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/login.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>logout.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/logout.php">Edit</a>             <a href="java script: void(0);">Delete</a>            <a href="java script: void(0);">Move</a>        </div>    </div>    <div class="column">        <h3>messages.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/messages.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>pagination.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/pagination.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>profile.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/profile.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>signup.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/signup.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>splittest.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/splittest.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>template.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/template.php">Edit</a>            <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>updates.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/updates.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>upload.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/upload.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>    </div>    <div class="column">        <h3>uploading.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/uploading.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>viewprofile.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/viewprofile.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>        <h3>vote.php</h3>        <div class="options">            <a href="text_editor.php?page=../www.hugdontmug.com/vote.php">Edit</a>             <a href="java script: void(0);">Delete</a>             <a href="java script: void(0);">Move</a>        </div>    </div></div>

And that uses the same CSS.Is the problem a lot more clear now?

[shadowayex]

Sorry for posting multiple times in a row, but this is actually a project for an IT convention, so it's kind of important that this gets fixed. Does anyone have an answer? And if it's not possible to fix it then tell me so I can find some other way to fix this.I have a very, very lengthy and annoy fix that includes making four divs and setting their widths and heights by checking current widths and heights of other parts to fit it all in. This annoying process does indeed fix the problem, but seems like a huge hack to fix such a small problem with objects not cooperating due to floats.Is there any way to make floated objects use the width: auto; property?Is there a way to make divs containing floated objects still build the border around them?I'm getting pressed to my wit ends due to the fact I cannot develop any more until these bugs are fixed, and this entire project is due before April, and trust me, there's a lot to do (including delete and move functions that you see are there, but not built yet).