Trying to achieve a basic side-by-side layout, but the element keeps getting pushed down.
Check out my JSFiddle here: https://jsfiddle.net/ca616067/1/
.whitebox {
background-color: #fff;
height: 200px;
display: inline-block;
}
To solve this issue, I resorted to using;
Display:inline-block;
position:relative;
top:-185px;
Any other suggestions on how to fix this problem?
To ensure your block-level elements are aligned, try utilizing the vertical-align property.
Check out an example of this in action on this code snippet
Both the image and .whitebox are inline-level elements within the same line box.
As a result, their vertical alignment is determined by the vertical-align property:
This property controls how inline-level boxes are positioned vertically inside a line box.
By default, the value is set to baseline:
Align the baseline of the box with its parent's baseline or bottom margin edge if no baseline exists.
Since the image lacks a baseline, its bottom margin edge will align with the baseline of .whitebox. This baseline is calculated based on
The baseline of an 'inline-block' element is typically the last line box's baseline in normal flow, unless certain conditions apply.
Therefore, you can
Adjust the vertical alignment of the image and .whitebox, for example:
img, .whitebox {
vertical-align: middle;
}
body {
background-color: #F2F2F2;
}
h3 {
font-family: sans-serif;
text-align: center;
color: #535353;
}
.forR {
width: 980px;
padding-left: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
padding-left: 10px;
}
.inline {
display: inline;
position: relative;
}
.whitebox {
background-color: #fff;
height: 200px;
display: inline-block;
}
.box1 {
width: 737px;
}
img {
height: 200px;
width: 200px;
margin-right: 10px;
display: inline-block;
}
img, .whitebox {
vertical-align: middle;
}<h3>Name</h3>
<div class="forR">
<img src="http://example.com/image.jpg">
<div class="whitebox box1">
<p class="inline">Name: John</p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
</div>
</div>Ensure that .whitebox has no in-flow line boxes so that its baseline becomes its bottom margin edge. Essentially, the content should be considered out of flow:
An element is out of flow when floated, absolutely positioned, or is the root element. In-flow elements do not meet these criteria.
You could use float: left as shown below:
.whitebox > * {
float: left;
}
body {
background-color: #F2F2F2;
}
h3 {
font-family: sans-serif;
text-align: center;
color: #535353;
}
.forR {
width: 980px;
padding-left: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
padding-left: 10px;
}
.inline {
display: inline;
position: relative;
}
.whitebox {
background-color: #fff;
height: 200px;
display: inline-block;
}
.box1 {
width: 737px;
}
img {
height: 200px;
width: 200px;
margin-right: 10px;
display: inline-block;
}
.whitebox > * {
float: left;
}<h3>Name</h3>
<div class="forR">
<img src="http://example.com/image.jpg">
<div class="whitebox box1">
<p class="inline">Name: John</p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
</div>
</div>Modify the overflow property of .whitebox from visible to another value to ensure the baseline aligns with the bottom margin edge:
For instance, set it to overflow: hidden:
.whitebox {
overflow: hidden;
}
body {
background-color: #F2F2F2;
}
h3 {
font-family: sans-serif;
text-align: center;
color: #535353;
}
.forR {
width: 980px;
padding-left: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
padding-left: 10px;
}
.inline {
display: inline;
position: relative;
}
.whitebox {
background-color: #fff;
height: 200px;
display: inline-block;
}
.box1 {
width: 737px;
}
img {
height: 200px;
width: 200px;
margin-right: 10px;
display: inline-block;
}
.whitebox {
overflow: hidden;
}<h3>Name</h3>
<div class="forR">
<img src="http://example.com/image.jpg">
<div class="whitebox box1">
<p class="inline">Name: John</p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
<p class="inline"></p>
</div>
</div>Of course! If you are facing this situation, you can apply the CSS property float: left; like so and see the changes in this newly updated fiddle:
.aligned {
display: inline;
position: relative;
float:left;
}
Uncertain of the issue, however, it appears to rectify itself once the paragraphs with the inline class are removed.
<div class="whitebox box1"></div>
Within my code, I currently have the <p> style set to a font-size of 16px. However, I would like to increase the font-size to 20px for any <p> text within a "card" element, without needing to add a separate font-class to each <p> individu ...
In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...
Encountering a JavaScript syntax error in my .blade.php file when trying to access $data->modal This is my controller function: public function buku_all($page, $modal) {$data = (object) [ 'sidebar' => "pelayanan", ...
Greetings, I am currently facing an issue on my blog where the grid resizes when clicking on an item, but the masonry layout doesn't adjust accordingly and causes items to become disorganized. If you'd like to see an example of this issue in act ...
While using static files in my Django app, I encountered a peculiar issue: specifying body{ } in the CSS file can alter the body's attributes, but using the div's id or class name does not affect the div's attributes. Here's an example: ...
After some careful consideration, I finally settled on a suitable title for this dilemma. The issue at hand involves a background image attached to the body element using CSS: body,html { height: 100%; } body { background: url("../images/header_lg.jpg") ...
I am currently working on a list where elements can be dynamically added using JavaScript with the following code: function getMovementButtons(size, articleId, articleTitle, articleType){ var lowerArticleType = articleType.toLowerCase(); var html = ...
Currently, I am working on developing a custom WordPress theme and here is the code snippet that I have been using: <div class="post-thumb"> <?php echo get_the_post_thumbnail(); ?> </div> I am facing an issue where I need to adjust the ...
I have been working on transitioning the focus from the PrimeNG menu to the first element in the list when the menu is toggled. Here is what I've come up with: In my template, I added: <p-menu appendTo="body" #menu [popup]="true&quo ...
Having a situation where two components are involved. The first component has an ng-click function that triggers a modal containing the second component. Currently, everything is working smoothly. However, the issue arises when the modal should only open a ...
I have come across a problem while using multiple pages with jQuery tabs. Let's consider Page1.html with #tab1 and #tab2, and Page2.html with #tab3 and #tab4. Here are the issues I am facing: 1) Within the tab content of Page1.html#tab2, there is a h ...
When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...
Is there a way to keep the table header fixed while allowing the table body to scroll in an HTML table? Any advice on how to achieve this would be greatly appreciated. Thanks in advance! ...
<div id="container"> <div>HEADER</div> <div>CONTENT</div> <div>FOOTER</div> <div><textarea></textarea></div> </div> <button>activate overlay</button> #cont ...
I am dealing with a formatting issue where the first item in my paragraphs is not lining up properly. Here is an example of the problem: Header waspeen: 3304.07 ananas: 24 appel: 3962.0 Header waspeen: 3304.07 ananas: 30 appel: 3962.0 Does anyone k ...
I've been working on building a website using the CakePHP framework, but I've encountered an issue where the site is sometimes not rendering properly. This results in either the CSS not being applied correctly or only partially applied. It's ...
I'm currently working on a project and encountering the error message Error trying to diff '[object Object]'. Only arrays and iterables are allowed. After researching, I found two potential solutions - adjusting the incoming data (which is n ...
What I aim to achieve https://i.sstatic.net/aNCWV.png I attempted to create a condition-like statement: [ Comparing the heights of the 3 elements ] → When all are smaller than the height of content: Stretches to the full height of content. (jus ...
I’m currently facing an issue where my custom CSS rules are not being applied after linking Bootstrap in my project. I am using Bootstrap CSS for a custom layout and need to incorporate my own styling as well. When I link bootstrap.min.css followed by m ...
I'm struggling with making my header element sticky and appear in front of my article. Modifying the z-index hasn't given me the desired result so far. Is the z-index ineffective when dealing with floating elements? Or is there a workaround to m ...