The display block style is not functioning properly

I am experiencing an issue with my HTML design. Even after setting the display to inline-block, the logo and text are not appearing on the same line.

.logo img {
    border-width: 0;
    height: auto;
    max-width: 100%;
    vertical-align: left;
}
.logo-text {
    clear: both;
    display: inline-block;
    overflow: hidden;
}
<div class="logo">
   <img src="images/logo.png"/>
</div>
<div class="logo-text">
   <h1>Tagore English School</h1>
<h1>New Millennium High School</h1>
<h3>"IMPARTING CONCRETE EDUCATION IS OUR MOTTO"</h3>
</div>

htmlcss

Answer №1

To ensure the logo div is properly aligned, you should set it to inline-block:

.logo {
 display:inline-block;
 }


.logo {
  display: inline-block;
}
.logo img {
  border-width: 0;
  height: auto;
  max-width: 100%;
  vertical-align: left;
}
.logo-text {
  clear: both;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}
<div class="logo">
  <img src="http://lorempixel.com/output/food-q-c-50-50-7.jpg" />
</div>
<div class="logo-text">
  <h1>Tagore English School</h1>
  <h1>New Millennium High School</h1>
  <h3>"IMPARTING CONCRETE EDUCATION IS OUR MOTTO"</h3>
</div>

Answer №2

You're facing a couple of issues here. The clear:both; property will clear the .logo element, and you'll also need to set the display property for both divs since they are block elements by default.

Moreover, you should use float and margins to position your logo properly.

It's worth mentioning that the vertical-align property accepts vertical values like top, middle, bottom, not horizontal values like left, center, right.

.logo {
  float: left;
  margin: 30px 30px 0 0;
}

.logo,
.logo-text {
  display: inline-block;
}

.logo img {
  border-width: 0;
  height: auto;
  max-width: 100%;
}

.logo-text {
  overflow: hidden;
}
<div class="logo">
  <img src="images/logo.png" />
</div>
<div class="logo-text">
  <h1>Tagore English School</h1>
  <h1>New Millennium High School</h1>
  <h3>"IMPARTING CONCRETE EDUCATION IS OUR MOTTO"</h3>
</div>

Answer №3

To ensure the image div displays inline, you must also set the logo div to display inline. This will allow both elements to display properly on the same line.

  1. Simply add the following to your CSS:

    .logo { display:inline-block; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

javascriptjqueryhtmlcssjquery-validate

R code for extracting data without using CSS path

Hey there, I'm reaching out because I'm struggling to figure out how to extract data from a webpage (""). Learning how to scrape data is my current project, and I'm specifically trying to gather contact information (Office, Fax, email) from ...

cssrwebweb-scraping

Updating CSS in response to a button click using JavaScript: A step-by-step guide

Currently, I am in the process of creating a basic website with bootstrap5 (no JS at the moment). One issue I am facing is when I shrink the screen to the point where the navigation bar transforms into a burger button. Whenever I click on the burger button ...

javascripthtmlcssbootstrap-5

Show picture during the process of loading an external webpage

Utilizing a script to load an external page (external meaning a page within my website) inside a div. Loading the page takes time, so I want to display an image until the page is fully loaded. JAVASCRIPT function HideLoader() { $('#loader' ...

javascriptjqueryhtmlcss

Loop through each JSON object and insert it into an HTML element

I am working on looping through a JSON object and converting it into HTML. While I can iterate through all the objects in the JSON, I am having trouble extracting just the first object. var res = '[{"ID":"246","mobile":"samsung","feedback":"feedback ...

javascriptjqueryhtmljson

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

htmlcss

nth-child selector causing tbody element to break

I have a code snippet that should alternate row colors between yellow and red. It works perfectly without using the <tbody> tags. However, when I include the <tbody> tags in my code, the layout breaks. It seems to restart with yellow at every n ...

htmlcsscss-selectors

Ways to incorporate smooth transitions to content using CSS

I recently created a website for a competition and I am looking to make the text change when a user hovers over a link. While I have managed to achieve the text change, I now want to add a transition to it. I have only used CSS to change the code. Can some ...

javascriptjqueryhtmlcss

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

Tips for showcasing a SQL INNER JOIN in HTML using Flask

I'm struggling with displaying a value from another table, and it would be easier to comprehend with the code provided below: contact.py def index(): db = get_db() contacts = db.execute( 'SELECT *' ' FROM conta ...

pythonhtmlsqlflask

Can someone assist me in figuring out why the ShowDetail.html page is not opening after I submit my form?

I'm having trouble getting the shoDetail.html page to open when I submit the code. I even tried entering the complete URL, but it still won't work. Here is the code I am using: <div class="form-group row"> <div class="col-lg-12 col-md-1 ...

javascriptjqueryhtmlcssbootstrap-4

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

Recently, I've encountered a strange issue with my XAMPP test server while working on a game project. Everything was running smoothly until I noticed that when I make changes to certain files in Notepad++ and save them, the updates are not being refle ...

javascriptjqueryhtmlxampp

Sharing resources between different origins and the file:// protocol

I have been developing an HTML5 application that is collecting data from various sources using JSONP. So far, everything involving a GET request has been functioning perfectly. However, I have encountered a hurdle while attempting to make a POST request. T ...

javascriptajaxjsonhtmljsonp

What is the best way to add multiple values to a single column but on separate rows?

Attempting to save the question and answer separately in different tables. Successfully stored the question text value, but encountering an error when inserting the answer value. Fatal error: Uncaught exception 'PDOException' with message ...

phphtmlmysql

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs

Enhance Vuetify pagination with personalized styles

I'm attempting to create a toolbar with pagination control aligned to the right, featuring smaller pagination control buttons. To achieve this, I took the following steps: Wrapped v-pagination in span (since v-spacer did not work without this) Adde ...

cssvuejs2vuetify.js

WordPress site experiencing issues with sub-menus disappearing following recent upgrade

I'm currently investigating a problem on a WordPress website where sub-menus are not showing up after upgrading to WP 3.9.1. The website, which can be found here, is using the Zeus theme (v. 1.1.0) and it seems that the behavior of the sub-menus is co ...

jquerycsswordpressmenunavigation

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

Why is the div still displaying with the same id and class even after postback in a partial view using MVC?

Encountering a issue where the partial view is repeating after post back, despite the functionality working correctly. Here is the code snippet from the View: @using (Ajax.BeginForm("MarkDefiniteDischargePatient", "PDDD",new { }, new Aja ...

jqueryhtmlcssasp.net-mvc

Template file for the contact form 7 plugin in Wordpress

I'm currently utilizing the Contact Form 7 plugin on my Wordpress website and I'm curious about which template it directs to when I enter mysite.com/contact/ into the browser. I am interested in making some edits to the template file, but I am un ...

htmlwordpresscontact-form-7