Tips for creating two divs next to each other with inline-block?

Is there a way to align the divs side by side and have the 'contentwrapper' div responsive to the resizing of the browser window?

HTML

<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div>

<div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:100%;
    height: 100%;
    background-color: red;
}

JSFIDDLE http://jsfiddle.net/A5HM7/

Answer №1

<style>
  #container {
    width:100%;
    height: 100%;
  }

  #leftside {
    float:left;
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
  }

  #content {
    float:left;
    display:inline-block;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    height: 100%;
    background-color: red;
  }
</style>

Answer №2

Alright, I've got a quick solution for you. Your HTML structure is solid, but I'm going to streamline it a bit more. Check out the updated JsFiddle link.

Here's your original code:

#maincontainer {
    width:100%;
    height: 100%;
}

And here's the tweak I made:

#maincontainer {
    width:100%;
    height: 100%;
    display:inline-block; // added this line
}

I also adjusted two other things:

#leftcolumn {
    float:left; // added this line
    width: 100px;
    height:100%;
    background: blue;
}
#contentwrapper {
    float:right; // added this line
    width:100%;
    height: 100%;
    background-color: red;
}

In the updated JsFiddle, I set a specific width, but feel free to customize it. Keep in mind that using a width of 100% alongside other elements on the same line may cause wrapping, as shown here:

#leftcolumn {
    display:inline-block; // changed this line above
    width: 100px; // This will cause issues below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block; // changed this line above
    width:100%; // This will cause issues above
    height: 100%;
    background-color: red;
}

For better alignment, consider this structure:

#leftcolumn {
    display:inline-block;
    width: 10%; // Works with the line below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:90%; // Works with the line above
    height: 100%;
    background-color: red;
}

In the JsFiddle, I added height and width for clarity. For further insights, check out this resource. Let me know if you encounter any issues!

Answer №3

By utilizing the calc function instead of floats or absolute positioning, it's possible to position two divs side by side effectively. This method is compatible with IE9 and above. Learn more about calc function on MDN And make sure to account for hidden spaces that may prevent two inline-block elements from fitting side by side: Stackoverflow thread on space blockers

<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div><!-- space blocker
--><div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
  width:100%;
  height: 100%;
}

#leftcolumn {
  display:inline-block;
  width: 100px;
  height: 100%;
  background: blue;
}

#contentwrapper {
  display:inline-block;
  width: calc(100% - 100px);
  height: 100%;
  background-color: red;
}

Answer №4

There are numerous options available, but one straightforward solution is implementing flexbox. Refer to the flexible box layout module documentation for a comprehensive understanding. Keep in mind that it is currently a candidate recommendation, so certain browsers may encounter compatibility issues.

Answer №5

.container {
    width:100vh;
    height: 100vh;
}

.column {
    display:inline-block;
    position: absolute;
    width: 340px;
    float: left;
    height: 100vh;
    background: blue;
}

.wrapper {
    display:inline-block;
    margin-left: 340px;  
    position: absolute;
    max-width: 100%;
    width: 100%; 
    height: 100vh;
    background-color: red;
}

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

Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...

Extracting data from XML using my custom script

I attempted to extract a specific value from an XML feed, but encountered some difficulties. In addition to the existing functionality that is working fine, I want to retrieve the value of "StartTime" as well. Here is the relevant section of the XML: < ...

Text field value dynamically changes on key press update

I am currently working on the following code snippet: {% for item in app.session.get('aBasket') %} <input id="product_quantity_{{ item['product_id'] }}" class="form-control quantity" type="text" value="{{ item['product_quan ...

Issue with Bootstrap Nav Pills only functioning properly for the initial option

When using Bootstrap nav pills, only the first one seems to work properly in my case. Even though I have inserted forms for each nav pill, it only shows a blank page. https://i.sstatic.net/QsL1l.png https://i.sstatic.net/Swmtq.png I have PHP code inside t ...

What is the method for modifying the chosen color using a select option tag instead of a list?

element, I have a Vue component that features images which change color upon clicking a list item associated with that color. <div class="product__machine-info__colors"> <ul> <li v-for="(color, index) in machine.content[0] ...

The marquee HTML code is not functioning correctly in the Chrome browser

<marquee behavior="scroll" scrollamount="2" direction="right" width="70%" style="background-color: transparent; height: 18px;" onmouseover="this.stop();" onmouseout="this.start();"> 1 2 3 4 5 6 7 //inside html </marquee> Th ...

Converting a single-column table into an array

After reading through numerous posts related to my query, I have yet to find a solution to my problem. Utilizing PHP and MySQLi, I am attempting to extract data from my server. Within my database, I have a single-column table and my aim is to store this ...

What is the best way to animate a three.js object to the right using GSAP without obstructing the surrounding HTML text?

As a newcomer to web design, I seek forgiveness if my question appears basic. I am working on an animated object in three.js that I want to move to the left side of the screen using GSAP. Additionally, I have a text "Hello" on the left side of the screen. ...

When hovering over A, the DIV element fails to appear

I'm encountering an issue with a specific page on my website () The problem lies with a .dropdown class that is supposed to display a DIV right below the header. In the source code, you can find it underneath <-- START DROPDOWN MENU -->. When I ...

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

Issue with margin-bottom in flexbox causing layout problems

My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...

Styling JavaFX ChoiceDialog with CSS

I'm currently struggling with customizing the appearance of a ChoiceDialog in my JavaFX application using CSS. While I've successfully applied styles to other dialog panes, it seems that the ChoiceDialog is not responding as expected, possibly du ...

Experience the potential of HTML5 by playing dual audio MKV/AVI videos

After conducting some research, it seems that Chrome has the necessary codecs to play MKV videos. However, I have yet to come across any information on how to select audio tracks in MKV and AVI files using Javascript/HTML5. Does anyone have any insight in ...

The v-for in Vue is not displaying the accurate text in the modal window and is only showing the data for the first item

In the process of learning Vue and Bootstrap, I am creating a blog where I want a modal window to pop up with the post information when the user clicks on the comment button. However, the issue I'm facing is that the modal only displays information fr ...

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

Tips for Omitting Children <li> from CSS Design

I'm currently working in SharePoint Designer and facing an issue with custom bullets in my list. My goal is to apply a custom bullet on the parent li elements (Desc 1 and Desc 2), but unfortunately, it's also being applied to all the children li ...

When updating the innerHTML attribute with a new value, what type of performance enhancements are implemented?

Looking to optimize updating the content of a DOM element called #mywriting, which contains a large HTML subtree with multiple paragraph elements. The goal is to update only small portions of the content regularly, while leaving the majority unchanged. Co ...