Split a <div> in two

HTML & CSS
#1

Ok, read my bio and you will understand this stupid question. Ok, here we go:

I got 2 divs. One for the menu and one for the content. It’s the content div that gives me a headache.
The div box for the menu and the div for contents are totally split with about 20px between them done with CSS. So over to the content div that I want to split. I want it to be two divs on the same line with no space between them. How do I do that? I attached some of my HTML and CSS to show you a little how this is sewed together. So what I want is one div split into two fields for the content. 1 content on the left side and one on the right side. I really appreciate your help :slight_smile: :smiley:

div.content_box {
	position: static;
	box-shadow: 30 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 2  0px 0 rgba(0, 0, 0, 0.19);
  	border: 1px solid #a1a1a1;
	border-radius: 7px;
	background-color: #f1f1f1;
	margin-top: 75px;
  	margin-left: 210px;
	width: 70%;

	<body class="size">
	<div class="wrapper">
	<div class="logo_box"></div>
	<div class="header_bar"><?php require_once("header_bar.php") ?></div>
	<div class="content_box">
  	<h4 class="headline_bold">Test</h4>
	<h3 class="content">Test <a href="content/contact.php">kontaktsiden</a>.</h3>
	<h4 class="headline_bold">Test</h4>
	<h3 class="content">Test</h3>
	<h4 class="headline_bold">Test</h4>
	<h3 class="content">Test</h3>
	<h3 class="content">Test</h4>
#2

Well, not sure what you are asking, but, I suspect you want to display a left and right content, not just one area! If so, just fo it. Something like this…

<div class="content">
    <div class="content-1">   <!-- You might want to make this width:50%... -->
        SOMETHING
    </div>
    <div class="content-2">   <!-- You might want to make this width:50%... -->
        Something Else
    </div>
<div>

Not sure if that is what you are asking…
You would need to perhaps set the div’s to be width:50% or some other issue, but since you didn’t show any details of the separate CSS, you need to show more for us to solve this for you…
I would guess you don’t understand that DIV’s are nested as needed and you just set the size and layout however you need. Bootstrap Library might help you as it is fairly good for beginners. Otherwise, give us more info on what you want to do…

Good luck!

#3

The solution below this post.
Exactly what I want to do. 50% on the left side and 50% on the other side. I want both on the same line. I should know how to do this. Because I can see how, but unfortunately I can’t get it down on the paper (screen). I have tried so many times so I cant see how to, and I can’t solve it. Everything is a mess. I bet many other has been there too. Since you call for what I have tried to set up I paste it below.

	<div class="test">
    <div class="test-1">
        Some rubbish
    </div>
    <div class="test-2">
        Some other rubish
    </div>
	</div>

The CSS

div.test {
  width: 100%;
  height: 400px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

div.test_1 {
  width: 50%;
  height: 400px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

div.test_2 {
  width: 50%;
  height: 400px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

The whole HTML

<!doctype html>
<meta charset="utf-8">
<html lang="NO">
<head>
<link href="css/test.css" rel="stylesheet" type="text/css">
<title>Nothing</title>
</head>
<body>
	<div class="test">
    <div class="test-1">
        Some rubbish
    </div>
    <div class="test-2">
        Some other rubish
    </div>
	</div>
</body>
</html>
#4

I found some about it on the net. Modified it a little and here’s the solution.

@charset "utf-8";
div.container {
  background-color: #a1a1a1;
  display: flex;
  width: 100%;
}
div.content_1 {
  background: #f1f1f1;
  flex-basis: 50%;
  height: 100px;
  margin: 1px;
  pading-left: 5px;
}
div.content_2 {
  background: #f1f1f1;
  flex-basis: 50%;
  height: 100px;
  margin: 1px;
  padding-left: 5px;
}

    <div class="container">
    <div class="content">
    </div>
    <div class="content">
    </div>
  </div>
#5

Glad you solved it. Flex is a bit newer way to handle display boxes. Success is always a great feeling!

#6

Yessssss, it always gives me a feeling of great success, no matter how small the problem is :wink:

Sponsor our Newsletter | Privacy Policy | Terms of Service