I would like 2 HTML/CSS divs placed next to each other (tried other methods), (Also format in divs)

StackOverflow https://stackoverflow.com/questions/23579386

  •  19-07-2023
  •  | 
  •  

سؤال

FIDDLE:

http://jsfiddle.net/z7tyW/

Here is my code:

    <div id="container">
    <div id="header">
<img align="center" src="images/image.png" />
    </div>
    <div id="wrapper">
    <div id="slogan">
    <h2>Some Text</h2>
    </div>
<div id="login">
        <form name="loginForm" action="<c:url value='j_spring_security_check'/>" method="post">
        Enter User Name: <input type="text" name="username"><br>
        Enter Password: <input name="password" type="password"><br>
        <input type="submit" value="Login">
        </form>
    </div>
    <div id="register">
      <a href="register.php"><img align="center" src="images/signup.png" /></a>
    </div>
</div>

Here is the CSS:

    #container {width: 800px;
    margin-left:auto;
    margin-right:auto;
    position: relative;}
    #header {width: 800px;
    height: 260px;
    margin-left:auto;
    margin-right:auto;
    overflow: hidden;
    text-align:center; }

    #wrapper {
    width: 800px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 80px;
    }

    #slogan {width: 100%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    border:2px solid;}

    #login { width: 399px;
    height:200px;
    float: left;
    margin-left:auto;
    margin-right:auto;
    border:2px solid;
    text-align:center;text-align: center;
    vertical-align: middle;
    }

    #register { width: 393px;
    height:200px;
    float:right;
    margin-left:auto;
    margin-right:auto;
    border:2px solid;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;}

Now I have tried many methods I've found on here. I am using google chrome. When using this method, the edges of the borders of login and registration, don't line up with the Slogan. The other methods I have tried, I end up with the registration still below login. Or the otherway around. I want those divs to be, together the same length as slogan and, directly next to each other so they are all snug up with slogan and touching each other's borders.

Any ideas? Thanks guys!

Also, I would like the login form to be at the center both vertically and horizantally. Same with the registration div. This will allow me to both both images in there!

Thanks again!

هل كانت مفيدة؟

المحلول

fiddle:

http://jsfiddle.net/Q9uQP/1/

HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title id='title'>HTML Page setup Tutorial</title>
        <link rel="stylesheet" href="style.css"/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
            $.fn.center = function(parent) {
                this.css("position", "relative");
                this.css("top", ($(parent).height() - this.height()) / 2 + "px");
                this.css("left", ($(parent).width() - this.width()) / 2 + "px");
                return this;
            };
            $(function() {
                $('#loginForm').center("#login");
            });
        </script>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <img align="center" src="images/image.png" />
            </div>
            <div id="wrapper">
                <div id="slogan">
                    <h2>Some Text</h2>
                </div>
                <div class="main">
                    <div id="login">
                        <form id="loginForm" name="loginForm" action="<c:url value='j_spring_security_check'/>" method="post">
                            Enter User Name: <input type="text" name="username"><br>
                            Enter Password: <input name="password" type="password"><br>
                            <input type="submit" value="Login">
                        </form>
                    </div>
                    <div id="register">
                        <a href="register.php"><img align="center" src="images/signup.png" /></a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

style.css:

body{
    background: #FFFFFF;
}

#container {
    width: 800px;
    margin:auto;
}

#header {
    width: 800px;
    height: 260px;
    margin:auto;
    overflow: hidden;
    text-align:center; 
}

#wrapper {
    width: 800px;
    margin: auto;
    margin-top: 80px;
}

#slogan {
    margin:auto;
    text-align: center;
    border:2px solid;
}
.main{
    background:#efefef;
    overflow:hidden;
}
#login { 
    width: 396px;
    height:200px;
    float: left;
    border:2px solid;
    text-align:center;        

}
#register {
    width: 396px;
    height:200px;
    border:2px solid;
    text-align: center;
    vertical-align: middle;
    float:left;
}

instead of the below line you direct download jquery from the website and include it in your project and give the relative path to it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

just save this code and include in your project:

http://code.jquery.com/jquery-1.11.1.min.js

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top