New course! Every coder should learn Generative AI!
Try a free lesson+ 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
Help me plss
0 Votes
Hello
0 Votes
Android studio emulator
0 Votes
Kotlin programing
0 Votes
[SOLVED] About split() Function
1 Votes
help me
0 Votes