+ 5
[html, css] how do i put two div element in one row?
how????
16 Answers
+ 3
Using float left
<style>
div{
border:2px solid black;
float:left;
}
</style>
</head>
<body>
<div style="height:100px;width:100px"></div>
<div style="height:100px;width:100px"></div>
+ 23
Hey, jason jang.
Your code doesn't work the way you want it to, because you have set the width of both elements to 100%. Hence they take up all of the width of the view port. Display: inline-block doesn't do anything in this case, because there's no space on one line left for your div.
Considering that each element has some margin and borders by default, you should decrease the width below 50%. Also you can style every element on the page with custom margins and paddings. Or you can "burn the whole town down" by
* {
margin: 0;
padding: 0;
}
+ 5
thanks!!
I will see if it works
+ 5
ok, it didn't work
and I forgot to mention that one is div and one is img
here is my code
HTML:
<div>
<img src="image.png" class="stuff">
<div class="stuff divelement">
some text
</div>
css:
.stuff {
display: inline-block;
width: 100%;
height: auto;
}
.divelement {
background-color: #ff8a8a;
color: white;
font-family: 'Do Hyeon', sans-serif;
}
+ 4
hello?
+ 4
Applying display:flex to outer div container for div and image works fine
+ 3
hmm... not working for me
+ 3
oh ok
+ 2
In the parent container of this two div‘s come style statements e.g. as follows:
display: flex;
flex-direction: row;
+ 2
Because image is occupying whole width ,do it 70% or so
+ 1
Try display: inline-block; on the parent div.. its better then float
+ 1
Use display:flex;
flex-direction:row; on the container div
+ 1
Also reduce the width of the image.
+ 1
Try this:
HTML
<div class="stuffContainer">
<img src="path-to-image" class="stuffImage">
<div class="stuffNested">
Some text
</div><!--end stuffNested-->
</div><!--end stuffContainer-->
CSS
.stuffContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
That should get your img and on the same row. After that you can style the img and nested div to your liking.
0
Ok, Try these
These are my code
HTML:
<div>
<img src="image.png" class="stuff">
<div class="stuff divelement">
some text
</div>
css:
.stuff {
display: inline-block;
width: 100%;
height: auto;
}
.divelement {
background-color: #ff8a8a;
color: white;
font-family: 'Do Hyeon', sans-serif;
}
0
Use classes
Often have questions like this?
Learn more efficiently, for free:
Hot today
And... Who is the staff then?
5 Votes
Which is the error in this code
1 Votes
Machine learning model debugging
2 Votes
Python IDE
0 Votes
Control Flow
1 Votes
Animations
2 Votes
Mini project 1
2 Votes
App development
1 Votes