html 2 div containers positioning
Question
I created a . In this article i want to create 2 divs. 1 div with an image and the other div with text. I created these both elements. But still not work. The text should be up not down like now...
Here is my Code
*{ padding: 0px; margin: 0px; font-family: Raleway; } body{ background-image: url(images/hintergrund.png); } section{ margin-top: 20px; width: 60%; background: white; border: 2px solid black; box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75); margin-left: auto; margin-right: auto; padding: 20px; } article{ width: 100%; background-color: red; overflow: hidden; } .one{ background-image: url("http://placehold.it/200x200"); height: 200px; width: 200px; } .two{ }
<html> <head> <title>Homepage</title> <link rel="stylesheet" href="index.css"> <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'> </head> <body> <section> <article> <div class="one"> </div> <div class="two"> exampleexampleexampleexampleexampleexampleexampleexamplexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaeexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamplempleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample </div> </article> <article> </article> </section> </body> </html>
Here is a jsfiddle jsfiddle
And if i write a long text, the text will run out of the section. How can i fix that?
2 answers
solution1
1 2015-01-09 23:36:40
http://jsfiddle.net/76739xw7/4/ The problem is that your div .one is not floating anywhere so nothing will be to the right of it. Another problem is that your .two needs a width and to float as well to be able to be next to one. Add some padding. A way to make words able to break is with css3s word-wrap property, my code here:
<body>
<section>
<article>
<div class="one">
</div>
<div class="two">
exampleexampleexampleexampleexamplexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaexampleexampleexampleexampleexampleexampleexaeexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexample
</div>
</article>
<article>
</article>
</section>
</body>
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 20px;
width: 60%;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
}
article{
width: 100%;
background-color: red;
overflow: hidden;
}
.one{
background-image: url("http://placehold.it/200x200");
height: 200px;
width: 200px;
float:left;
}
.two{
float:left;
width:40%;
word-wrap: break-word;
box-sizing:border-box;
padding:10px;
}
solution2
0 2015-01-09 23:36:59
You have two DIV's next to each other, as they are both BLOCK level elements they will appear on top of each other.
If you want to put them side-by-side you can make them Float, or use Inline-Block
To make the text sit in the middle of the box you can add padding to the box or use line-height
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.