CODEWITHSUNDEEP
htmlcss
Julie24
Julie24

Reputation: 279

split to two and position a div

I would like to split my div tag up in two. But I am not quite sure how to do it. It looks like this now:

Graphic now

And I would like that there is a header in the div tag with a color for a headline. It should look like this:

enter image description here

But how can I split up like that? Best Regards Julie

HTML and CSS:

        #container {
        width: 100%;
    }
    
    
    body {
        background-color:rgb(48,48,48);
    }
    
    .topbar {
        width: 100%;
        height: 50px;
        background-color: red;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    
    .latestnumbers {
        float: left;
        height: 600px;
        width: 50px;
        padding: 25px;
        border: 2px solid #FFECB3;
        margin: 20px;
        background-color:rgba(116,116,116,0.3);
    }
    
    .hotnumbers {
        float: left;
        height: 600px;
        width: 50px;
        padding: 25px;
        border: 2px solid #FFECB3;
        margin: 20px;
        background-color:rgba(116,116,116,0.3);
    }
    
    .coldnumbers {
        float: left;
        height: 600px;
        width: 50px;
        padding: 25px;
        border: 2px solid #FFECB3;
        margin: 20px;
        background-color:rgba(116,116,116,0.3);
    }
    
    
    .numberheader {
        height 100px;
        background-color: red;
        position: absolute;
        top: 80px;
        left: 30px;
        right: 0;
        width: 100px;
        height: 50px;
        
    }
    
    .content {
        float: left;
        height:50px;
        width:700px;
        padding: 25px;
        border: 2px solid navy;
        margin: 20px;
        background-color: red;
    }
    <html>
    
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/my_script.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css\placing.css">
        <title>Numbers</title>
    </head>
    
    <body>
        <div id="container">
            <div class="topbar">
                <p>Topbar</p>
            </div>
            <div class="latestnumbers" id="show">
                    <div class="numberheader">
                        <p>Tal</p>
                    </div>
            </div>
                <div class="content">
                <p>Enter The Number</p>
                <form id="myForm" action="select.php" method="post">
                    <input type="number" name="numbervalue">
                    <button id="sub">Save</button>
                </form>
                <span id="result"></span>
            </div>
            <div class="hotnumbers">
                <p>test</p>
            </div>
            <div class="coldnumbers">
                <p>test</p>
            </div>
        </div>
        
    </body>
    </html>

EDITED: I have just tried to position the div tag now, and it is position in the middle now. But the code for the position is pretty messy, isn't it?

Upvotes: 1

Views: 301

Answers (2)

Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

Try this, I think this was what you meant right? https://jsfiddle.net/54d4tbtc/

It didn't look that good because of the width's

.content {
  float: left;
  height: 50px;
  width: 300px;
  padding: 25px;
  border: 2px solid navy;
  margin: 20px;
  background-color: red;
}

Upvotes: 2

Lewie Allen
Lewie Allen

Reputation: 26

I would make two divs, and wrap one inside the other like this:

<div class="topbar"></div>

<div class="outer">
  <div class="inner">
    <p>words</p>
  </div>
</div>

when combined with this type of CSS: 

.inner{
  width:100%;
  height: 150px;
  background-color: #FFECB3;
  word-wrap: break-word;
  text-align: center;
}

.inner p{
  padding-top: 10px;
}

it should work fine. Not sure what .talraekkeheader does in your CSS, but if it was planned for this .inner div then you may not need it after doing this.

NB. I added the word-wrap styling to .inner to avoid the overflow of text that you put in the div. I added padding to the paragraph text within the element for aesthetics mainly, as you don't want text to close to the top of the div.

Upvotes: 0

Related Questions