CODEWITHSUNDEEP
htmlcssresponsive-design
vinhnguyen
vinhnguyen

Reputation: 46

How to set width auto for elements

I have 3 div tags. 

<div id="thread">
          <div id="left-panel" style="width: auto;">a</div>
          <div id="content" style="width:1024px; margin: auto;">c</div>
          <div id="right-panel" style="width: auto">b</div>
</div>

I want div#left-panel, div#right-panel in-line with div#content. Div#left-panel and div#right-panel auto width when screen resolution change.

Please help me!

Upvotes: 0

Views: 140

Answers (3)

Stefan
Stefan

Reputation: 1106

Have you considered CSS media queries? (Make sure to put the meta tag in the head)

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">

@media(min-width: 1024px) {
    #content {}
    #left-panel {}
    #right-panel {}
}

@media(max-width: 1023px) {
    #content {}
    #left-panel {}
    #right-panel {}
}

Upvotes: 1

sagar mane
sagar mane

Reputation: 125

<div id="thread" style="float:left;width:100%">
          <div id="left-panel" style="width:10%;float:left">a</div>
          <div id="content" style="width:70%;float:left;">c</div>
          <div id="right-panel" style="width: 20%">b</div>
</div>

Upvotes: 1

Manish Mishra
Manish Mishra

Reputation: 12375

for the Current Markup plus CSS combination of yours, you cannot horizontally align your three divs.

There is one rule, which you must follow, in order to horizontally align your divs.

(Total(width + margin + padding) of divs to be horizontally aligned ) 
                     <= Total width of the Parent Container.

Now, you want to cover entire horizontal screen width (no horizontal scrollbar), then you can give percentage width to your divs and float:left them i.e.

      <div id="thread" style="width: 100%;">
           <div id="left-panel" style="width: 10%">a</div>
           <div id="content" style="width:78%;">c</div>
           <div id="right-panel" style="width: 10%">b</div>
      </div>

see this demo

Upvotes: 0

Related Questions