Issue with div css layout_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-07 07:40 出处：网络

I want to create a css layout: 2 columns Each column with a height of 100% of the window Left column should be width 40% and

相关专题：css layout

I want to create a css layout:

2 columns
Each column with a height of 100% of the window
Left column should be width 40% and have two rows, the height of the bottom row should be 20px and top should take up the remaining space
Right column should be width 60% and have two rows, the height of the top row should be 70% and bottom 30%.

I also want to be able to toggle hide/show on the second column and display another column in its place. I know how to hide and show with javascript but I dont know how to place the other column in the second column's place without using absolute positioning.

Here is an example of the two different layouts, the blue area represents the window size and the green is the divs, I didnt mark the columns but you should be able to see that there are two columns. Also I am going with margin: 0 and padding: 0, I left the space inbetween the divs to clarify the layout:

Issue with div css layout

http://imageshack.us/photo/my-images/535/layout1rt.png/

Issue with div css layout

http://imageshack.us/photo/my-images/683/layout2z.png/

* UPDATE * Sorry for all the anger my question generated. I have googled and experimented with divs but havent come up with a good solution yet. The one I have doesnt really fit 100%, there are some pixel differences, I will post the code below. I made the design with framesets first and then tables and then I thought that I have to learn how divs really work sometime. Well after some days searching and reading about css float left right and so on I gave up and created this account. It seems it would be very fast for someone who understands it to make my wanted layout and thats why I didnt post my code. I could just learn by reading and playing with the answer code, but you are right, I made a mistake.

My code works 100% in Mozilla but fails in IE. * UPDATE *

* UPDATE 2 I got it all working but there seems to be a pixel error in IE so I had to add overflow: hidden to not get the scrollbars. Dont know whats the cause? UPDATE 2 *

<html>
<head>
<script type="text/javascript">
function toggleSheet(){
    if(document.getElementById("col3").style.display == "block"){
        document.getElementById("col3").style.display = "none";
    } else {
        document.getElementById("col3").style.display = "block";
    }
}
</script>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    overflow:hidden;
}
#wrapper {
    width: 100%;
    height:100%;
}

#col1 {
    float:left;
    width: 40%;
    height:100%;
    background:blue;
}

#col2 {
    float:right;
    width: 60%;
    height:100%;
    background:red;
}

#col3 {
    position:absolute;
    width: 60%;
    right:0;
    height:100%;
    background:black;
    display:none;
}

#col1top {
    height:100%;
    margin-bottom: -20px;
    background:purple;
}

#col2top {
    height:70%;
    background:green;
}

#col1bottom {
    height: 20px;
    background:brown;
}

#col2bottom {
    height:30%;
    background:yellow;
}
</styl开发者_如何学Ce>
</head>
<body>
<div id="wrapper">
    <div id="col1">
        <div id="col1top" onClick="toggleSheet();">

        </div>
        <div id="col1bottom">

        </div>
    </div>
    <div id="col2">
        <div id="col2top">

        </div>
        <div id="col2bottom">

        </div>
    </div>
    <div id="col3">

    </div>
</div>
</body>
</html>

Thanks for your time.

/illion

This is really kind of a ridiculous thing to answer but I was bored.

http://jsfiddle.net/m7TuJ/embedded/result/

Not a best solution by any means but it achieves what you're asking for.